第一部分 Dom对象知识点回顾 效果不去展示重点在后面的案例上
Demo1 Dom元素中的节点操作和方法操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dom元素的节点操作</title> </head> <body> <!-- !div元素格式 --> <div class="box"> <h1>我是标题有些节点操作你知道吗</h1> <div class="container">我是div元素的信息</div> <div class="dest">我是一个段落标签</div> <div class="dest">我是第二个段落标签</div> <span>我是Span元素的镖旗</span> </div> <!-- !表格元素导行 --> <table> <tr> <td class="one">1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td class="one">2</td> <td>3</td> <td>4</td> <td>5</td> </tr> <tr> <td>1</td> <td>2</td> <td class="one">3</td> <td>4</td> <td>5</td> </tr> <tr> <td class="nav_li">我是nav_li元素</td> <td>2</td> <td> <li>我是li标签</li> <li>我是li标签</li> <li>我是li标签</li> </td> <td class="one">4</td> <td>5</td> </tr> <tr> <td>1</td> <td id="nav">我是id选择器</td> <td>3</td> <td>4</td> <td class="one">5</td> </tr> <caption>我是caption的元素内容</caption> <thead>我是thead的元素的内容</thead> <tbody>123</tbody> </table> <!-- !表单的元素信息 --> <form action="index.html" method="" id="form"> <table> <tr> <td><input type="text" placeholder="手机号/邮箱/账号名"></input></td> </tr> <tr> <td><input type="password" name="password" onclick="btn()" id="psw" placeholder="请输入登录的用户密码"> <!-- <img src="img/11 (2).png" / style="width: 30px;"> --> <p style="color: black;opacity: 0.5;"><a href="">短信验证码登录页面</a></p> </tr> <tr> <td><input type="submit" value="登录按钮"></td> </tr> <tr> <td colspan="2" id="test"> <p style="float: left;"><a href="">短信验证手机</a></p> <p style="float: right;"><a href="">快速注册</a></p> </td> </tr> </table> </form> <script> // 获取元素的信息 // 文档声明 var DOCTYPE = document.doctype console.log(DOCTYPE) // html var html = document.documentElement console.log(html); html.style.background = 'pink' // head var head = document.head console.log(head) head.style.background = "yellow" var body = document.body console.log(body) console.log(body.parentNode) console.log(head.parentNode) //head的父节点 Html console.log(body.previousSibling) //前兄弟节点 #text console.log(head.nextSibling) //后兄弟节点 #text console.log(head.childNodes) //head子节点 NodeList(9) [text, meta, text, meta, text, meta, text, title, text] console.log(body.firstChild) console.log(body.lastChild) console.log(body.childNodes[0]) console.log(body.childNodes[1]) console.log(body.childNodes[2]) var body = document.body console.log("/获取了元素的body元素") console.log(body)//获取了元素的body元素 // body.style.background = 'green' console.log("获取body的第一个孩子为 style") console.log(body.children[0])//获取body的第一个孩子为 style console.log("获取body的第二个孩子为 table") console.log(body.children[1])//获取body的第二个孩子为 table body.children[1].background = 'yellow' console.log("获取body的第三个孩子为 script") console.log(body.children[2])//获取body的第三个孩子为 script console.log("获取所有的tr") console.log(body.children[1].rows) //所有的tr var table = document.body.children[0] console.log(table) // 获取表格的信息 var table = document.querySelector("table") console.log(table) console.log(table.rows) console.log(table.caption) console.log(table.tHead) console.log(table.tFoot) console.log(table.tBodies) console.log(table.rows) var td = document.body.children[1].rows console.log(td) var getclass = document.getElementsByClassName('one') console.log(getclass) //querySelector() — 精准的获取某个元素 var f = document.querySelector(".one") //uerySelectorAll()获取符合类名或者标签名等条件的的所有元素 var g = document.querySelectorAll('.one') console.log(f) // 获取表单的信息 var form = document.querySelector("#form") var from = document.forms[0] console.log(from) console.log(from.elements);//获取所有元素 console.log(from.emil)//通过name属性获得焦点 // 1. getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); var nav_li = document.getElementsByClassName('nav_li') console.log(nav_li) // 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); // 3. querySelectorAll()返回指定选择器的所有元素对象集合 var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis); </script> </body> </html>
重点代码
// 1. getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); var nav_li = document.getElementsByClassName('nav_li') console.log(nav_li) // 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); // 3. querySelectorAll()返回指定选择器的所有元素对象集合 var allBox = document.querySelectorAll('.box'); console.log(allBox); var lis = document.querySelectorAll('li'); console.log(lis);
Demo2 attribute的操作 对属性的增删改查
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>attribute的操作</title> <!-- 增加 修改 删除 判断 查询 --> </head> <body> <div class="box" id="main" name="wer" sex="男" age="67" data-srt="我较上周"></div> <script> // 获取元素的值的属性值 var classEl = document.querySelector('#main') // 控制台打印输出 console.log(classEl) // 判断该属性是否age存在 var flag = classEl.hasAttribute("age") console.log(flag) var flag1 = classEl.hasAttribute("name") console.log(flag1) // 获取某个值 var name = classEl.getAttribute("name") console.log(name) var age = classEl.getAttribute("age") console.log(age) // 自己定义的属性 data-* var srt = classEl.getAttribute("srt") console.log(srt) // 设置元素的值 var setName = classEl.setAttribute("setName", "我是设置的元素值") var getName = classEl.getAttribute("setName") console.log("获取姓名为"+getName) // 设置元素的值二 var setWeight=classEl.setAttribute("setWeight","我的体重200kg") // 获取元素的值 var getWeight=classEl.getAttribute("setWeight") console.log("获取体重的值"+getWeight) // 删除属性值元素 var delteName = classEl.removeAttribute("setName") console.log(delteName) var attrs =classEl.attributes //获取所有的属性 console.log(attrs) for (var item of attrs) { console.log(item) } // console.log(classEl.className) console.log(classEl.id) </script> </body> </html>
重点代码
// 判断该属性是否age存在 var flag = classEl.hasAttribute("age") // 获取某个值 var name = classEl.getAttribute("name") console.log(name) // 设置元素的值 var setName = classEl.setAttribute("setName", "我是设置的元素值") var getName = classEl.getAttribute("setName") console.log("获取姓名为"+getName) // 删除属性值元素 var delteName = classEl.removeAttribute("setName") console.log(delteName)
Demo3 classlist使用动态的对类名增伤改查
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态的style样式的增删改查</title> <style> button{ width: 200px; height: 200px; background-color: bisque; } .mystyle { width: 500px; height: 50px; padding: 15px; border: 1px solid black; } .anotherClass { border: 1px solid red; background-color: lightblue; color: white; } .thirdClass { text-transform: uppercase; text-align: center; font-size: 25px; } .newClassName{ background-color: darkturquoise; color: red; height: 300px; width: 200px; } #id{ overflow: hidden; } </style> </head> <body> <a onclick="insertinto()">点我我是一个增加class选择器的类名</a> <div id="myDIV">123 </div> <script> function insertinto() { // 增加一个类名 document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass"); alert("增加几个类名") var all = document.querySelector("#myDIv") removes() } function removes() { document.getElementById("myDIV").classList.remove("mystyle"); alert("删除的元素thirdClass") toggle() } function toggle(){ document.getElementById("myDIV").classList.toggle("newClassName"); // 调用函数 contains() } function contains(){ var x = document.getElementById("myDIV").classList.contains("anotherClass"); console.log(x) var y = document.getElementById("myDIV").classList.contains("mystyles"); console.log(y) } </script> </body> </html>
重点代码
document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass"); document.getElementById("myDIV").classList.remove("mystyle"); document.getElementById("myDIV").classList.toggle("newClassName"); var x = document.getElementById("myDIV").classList.contains("anotherClass"); console.log(x) var y = document.getElementById("myDIV").classList.contains("mystyles"); console.log(y)
Demo4 自己定义属性值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 自己定义的属性值 --> <div class='box' data-name="why" data-age="23">我是属性值的内容信息</div> <script> var boxEl=document.querySelector(".box") console.log(boxEl.age) console.log(boxEl.name) console.log(boxEl.dataset.name) console.log(boxEl.dataset.age) </script> </body> </html>
Demo5 元素的属性修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ height: 200px; width: 200px; background-color: rgb(110, 223, 140); color: crimson; } </style> </head> <body> <div class="box" style="width: 300px;">我是元素修改的属性信息</div> <script> var boxEl=document.querySelector('.box') console.log(boxEl) // 修改属性值 var s= boxEl.style.width="600px" var d=boxEl.style.display='' console.log(d) console.log(s) // 全局函数获取内容 console.log(getComputedStyle(boxEl).width) </script> </body> </html>
Demo6 Dom对象的基础事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件的文件基础信息</title> <style> * { background-color: rgb(0, 232, 232); } #input_text { border: 2px solid paleturquoise; width: 300px; height: 300px; margin: auto; background-color: red; color: white; border-radius: 12px; font-size: 30px; } #input_text1 { border: 2px solid rgb(20, 20, 20); width: 300px; height: 300px; margin: auto; background-color: rgb(255, 255, 255); color: rgb(247, 9, 9); border-radius: 12px; font-size: 30px; } .input_text1 { border: 2px rgb(255, 0, 0); width: 300px; height: 300px; margin: auto; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0); border-radius: 12px; font-size: 30px; } .input_text2 { border: 1px rgb(0, 0, 0); width: 300px; height: 300px; margin: auto; background-color: rgb(255, 255, 255); color: rgb(255, 255, 255); border-radius: 12px; font-size: 30px; display: block; } </style> </head> <body onload="checkCookies()"> <!-- 事件三要素 - 事件源（谁）：触发事件的元素 - 事件类型（什么事件）： 例如 click 点击事件 - 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 --> <!-- 事件一 鼠标单机事件 --> <!-- onclick鼠标单机左边生效 --> <button id="input_text">我是用户的单机事件</button> <script> var btn = document.getElementById("input_text") console.log(btn) btn.onclick = function () { var ss=document.querySelector("#input_text") ss.textContent="我是自定义的函数的单机事件信息内容" alert("我是用户实现的单机事件") btn.style.backgroundColor = 'pink' btn.style.color = 'red' btn.addEventListener("click",function(){ console.log("btn.addEventListener 创建单机事件") }) } </script> <!-- ondblclick 鼠标双击时 鼠标 --> <button id="input_text1">我是用户的鼠标两次单机的事件</button> <script> var btn1 = document.querySelector("#input_text1") console.log(btn1) btn1.ondblclick = function () { confirm("我是用户的鼠标两次单机的事件") btn1.style.backgroundColor = 'green' } // onkeydown 键盘按下 键盘 btn1.onkeydown = function () { window.alert("键盘按下的事件") btn1.style.height = '100px' } // onkeypress 键盘按键（含按下与抬起） 键盘 btn1.onkeypress = function () { console.log("键盘按键（含按下与抬起） 键盘 事件") btn1.style.backgroundColor = 'yellow' } </script> <button class="input_text1">键盘抬起</button> <script> var btn2 = document.querySelector(".input_text1") // onkeyup 键盘抬起 键盘 btn2.onkeyup = function () { alert("键盘抬起来使用的事件") btn2.style.height = '200px' btn2.style.color = 'black' } // onmousedown 鼠标按下时 鼠标 btn2.onmousedown = function () { alert("onmousedown 鼠标按下时 鼠标") btn2.style.backgroundColor = 'yellow' } // 鼠标的移入移出事件 移出时 // onmousemove 鼠标移动时 鼠标onmouseup 鼠标抬起时 鼠标onmouseout 鼠标移出时 鼠标 onmouseover 鼠标移入时 鼠标 btn2.onmousemove = function () { btn2.style.backgroundColor = 'orange' btn2.style.height = '250px' } // 移出 btn2.onmouseout = function () { btn2.style.backgroundColor = 'red' btn2.style.height = '400px' btn2.style.color = ' white' } </script> <button class="input_text2" onmouseover=sut()>鼠标移入事件</button> <script> function all() { var btn3 = document.querySelector(".input_text2") btn3.onmouseover = function () { btn3.style.backgroundColor = 'red' btn3.style.color = 'white' } // 移出 btn3.onmouseout = function () { btn3.style.height = '400px' btn3.style.color = ' white' btn3.style.display = 'none' } } function sut() { all() } </script> <script> function checkCookies() { if (navigator.cookieEnabled == true) { alert("Cookies 可用") } else { alert("Cookies 不可用") } } </script> </body> </html>
Demo7 Dom事件的冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> div { width: 200px; height: 200px; background-color: cornflowerblue; text-align: center; line-height: 200px; } span { border: 3px solid red; background-color: aliceblue; background-color: antiquewhite; height: 100%; } p { background-color: aquamarine; color: red; } body { background-color: aliceblue; } </style> <div>我是div <span>我是span <p>我是p标签的内容信息</p> </span> </div> <script> var body = document.body; var divel = document.querySelector("div"); var spanel = document.querySelector("span"); var pel = document.querySelector("p") pel.onclick = function () { console.log(this.textContent); } spanel.onclick = function () { console.log(this.textContent); } divel.onclick = function () { console.log(this.textContent); } body.onclick = function () { console.log(this) } document.onclick = function () { console.log(this) } window.onclick = function () { console.log(this) } </script> </body> </html>
Demo8 Dom对象事件捕获
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script> window.onload=function(){ } </script> <body> <style> div { width: 100%; height: 200px; background-color: cornflowerblue; text-align: center; line-height: 200px; } span { display: block; border: 3px solid red; background-color: aliceblue; background-color: antiquewhite; height: 100%; } p{ background-color: aquamarine; color: red; } body { background-color: aliceblue; } </style> <div>我是div <span>我是span <p>我是p标签的内容信息</p> </span> </div> <script> var body = document.body; var divel = document.querySelector("div"); var spanel = document.querySelector("span"); var pel=document.querySelector("p") divel.addEventListener("click",function(){ window.dispatchEvent(new Event("ghjkl")) }) window.addEventListener("ghjkl",function(e){ console.log(e) }) pel.onclick=function(){ console.log(this.textContent); } spanel.onclick = function () { console.log(this.textContent); } divel.onclick = function (e) { console.log("当前处理的事件") console.log(e.target) //当前处理事件 console.log("当前处理的事件是div") console.log(e.currentTarget) console.log(this.textContent); console.log(this==divel) console.log(this===divel) e.stopPropagation() alert("组织") } body.onclick = function () { console.log(this) } document.onclick = function () { console.log(this) } window.onclick = function () { console.log(this) } // 事件捕获 // 先捕获到目标事件然后在mao body.addEventListener("click", function (e) { console.log(this) // 判断该事件的类型 console.log(e.type) //客户端的x y的距离 console.log(e.clientX, e.clientY) // 处理的事件是当前处理的事件是什么 console.log(e.target) //当前处理事件 console.log(e.currentTarget) //当前处理事件 console.log(e.eventPhase) //事件所处在的阶段 console.log(e.offsetX, e.offsetY) //事件发生的元素内 console.log(e.pageX, e.pageY) //事件发生在document的位置 console.log(e.screenX, e.screenY) // 相对屏幕的位置 }, true) divel.addEventListener("click", function () { }, true) spanel.addEventListener("click", function (e) { }, true) document.addEventListener("click", function (e) { }, true) window.addEventListener("click", function (e) { }, true) </script> </body> </html>
重点代码
body.addEventListener("click", function (e) { console.log(this) // 判断该事件的类型 console.log(e.type) //客户端的x y的距离 console.log(e.clientX, e.clientY) // 处理的事件是当前处理的事件是什么 console.log(e.target) //当前处理事件 console.log(e.currentTarget) //当前处理事件 console.log(e.eventPhase) //事件所处在的阶段 console.log(e.offsetX, e.offsetY) //事件发生的元素内 console.log(e.pageX, e.pageY) //事件发生在document的位置 console.log(e.screenX, e.screenY) // 相对屏幕的位置 }, true)
第二部分 案例实操
案例一 案例一轮番消息 HTml+CSS结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- ! CSS样式 --> <style> .tip-bar { /* margin: auto; */ display: inline-flex; align-items: center; height: 100%; background-color: rgba(0, 0, 0, .4); border-radius: 16px; background-color: aqua; } img { background-repeat: no-repeat; height: 200px; width: 200px; border-radius: 50%; margin-right: 5px; } span { font-size: 20px; color: rgb(255, 0, 0); margin-right: 8px; } button { margin: auto; height: 200px; width: 200px; text-align: center; align-items: center; } </style>
function all() { console.log("执行函数信息") // 调用函数 FenZhuang() } function FenZhuang() { // 创建数组 在数组中创建对象 var user = [ { Name: '我叫上三对这张图片感兴趣哦', imgUrl: './img/1.jpeg' }, { Name: '我叫上四对这张图片感兴趣哦', imgUrl: './img/2.jpeg' }, { Name: '我叫上五对这张图片感兴趣哦', imgUrl: './img/3.jpeg' }, { Name: '我叫上六对这张图片感兴趣哦', imgUrl: './img/4.jpeg' }, ] // 获取图片的信息 var img = document.querySelector("img") console.log(img) // 获取div的信息 var div = document.querySelector(".tip_bar") console.log(div) // 获取Span元素信息 var span = document.querySelector("span") console.log(span) var i = 1 setInterval(function () { img.src = user[i].imgUrl // 改变图片的地址 var imghu = div.style.backgroundImage = `url("${user[i].imgUrl}")` console.log(imghu) span.textContent = user[i].Name i++ if (i == user.length) i == 0 }, 1000) } all()
案例二 案例二表格转动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 头部导航样式 */ .header_tab { width: 100%; height: 35px; margin-top: 10px; background-color: #3B99FC; /* border: 1px solid red; */ } .tab_List { width: 80%; height: 35px; /* border: 1px solid red; */ margin: auto; line-height: 35px; } .tab_List_txt { list-style: none; color: white; font-size: 14px; text-align: center; } .tab_List_txt li { float: left; height: 35px; margin-left: 2%; width: 10%; } .tab_List_txt li:hover { cursor: pointer; border-radius: 3px; background-color: #2676E3; } /* 高亮元素 */ .active { background-color: #1476ff; border-radius: 3px; } .actives { background-color: #f2b6f1; border-radius: 3px; opacity: 0.9; border: 2px solid red; } </style> </head> <body> <div class="header_tab"> <div class="tab_List"> <ul class="tab_List_txt"> <li class="item active">首页</li> <style> /* 多了这个元素信息 */ .roSpan { display: inline-block; transition: transform 0.5s ease; } </style> <li class="item">车票 <span class="roSpan">∨</span></li> <li class="item">团购服务 <span class="roSpan">∨</span></li> <li class="item">会员服务 <span class="roSpan">∨</span></li> <li class="item">车站服务 <span class="roSpan">∨</span></li> <li class="item">商旅服务 <span class="roSpan">∨</span></li> <li class="item">出行指南 <span class="roSpan">∨</span></li> <li class="item">信息查询 <span class="roSpan">∨</span></li> </ul> </div> </div>
// 获取ul var ulEl = document.querySelector("ul") // 获取到当前高亮的元素 var activeEl = ulEl.children[0] var flag = false // console.log(activeEl); // 绑定鼠标移入事件 ulEl.onmouseover = function (e) { // 判断是否点击的是li元素 if (e.target !== this) { // 是否有高亮，有就删除 if (activeEl) activeEl.classList.remove("active") // 给当前移入的元素添加高亮 e.target.classList.add("active") var spanEl = e.target.firstElementChild if (spanEl) spanEl.style.transform = `rotate(-180deg)` // 赋值给下一次需要删除的高亮元素 activeEl = e.target } } ulEl.onclick = function (e) { // 判断是否点击的是li元素 if (e.target !== this) { // 是否有高亮，有就删除 if (activeEl) activeEl.classList.remove("active") // 给当前移入的元素添加高亮 e.target.classList.add("actives") var spanEl = e.target.firstElementChild if (spanEl) spanEl.style.transform = `rotate(-180deg)` // 赋值给下一次需要删除的高亮元素 activeEl = e.target } } // 给li绑定移出事件 ulEl.onmouseout = function (e) { var spanEl = e.target.firstElementChild if (e.target.tagName === "LI") { if (spanEl) spanEl.style.transform = `rotate(0deg)` } }
