1.关于dom
首先要有三要素
1.获取事件源
2.事件
3.事件驱动
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #warp{ 8 100px; 9 height: 100px; 10 background-color: darkorange; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="box" id="warp" style=""></div> 16 <p> alex</p> 17 <script> 18 <!--获取事件源--> 19 var oDIV = document.getElementById('warp'); 20 //事件 21 oDIV.onclick = function () { 22 console.log(oDIV.style); 23 oDIV.style.width = "400px"; 24 oDIV.style.height = "400px"; 25 //事件驱动 26 oDIV.style.float = "left" 27 28 } 29 30 </script> 31 32 </body> 33 </html>
2.关于js图片来回切换以及标签属性的重新定义
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*.box{*/ 8 /* 100px;*/ 9 /*height: 100px;*/ 10 /**/ 11 /*}*/ 12 </style> 13 </head> 14 <body> 15 <!--<div class="box"></div>--> 16 17 <img src="https://img01.sogoucdn.com/app/a/100520093/d22f70151feea573-27b1c41a9baedcf3-b916a8be720b4963e543183e48a3bdac.jpg" alt="" id="shop"> 18 <script> 19 var isHover = true; 20 //这里是可以对标签的属性进行操作 21 //运用this. 来进行标签属性的重新定义 22 23 document.getElementById("shop").onclick=function () { 24 //这里要想使图片多次使用 需要if 判断 最后给出一个返回变量 25 //再继续使用,如果后面没有,会只进行一次 26 if (isHover){ 27 this.src = "https://img04.sogoucdn.com/app/a/100520093/3c28af542f2d49f7-da1566425074a021-49652b4db4e26f742bdf91d5ddf65e2f.jpg"; 28 isHover = false; 29 }else{ 30 this.src ="https://img01.sogoucdn.com/app/a/100520093/d22f70151feea573-27b1c41a9baedcf3-b916a8be720b4963e543183e48a3bdac.jpg"; 31 isHover = true; 32 } 33 } 34 35 36 </script> 37 </body> 38 </html>
3.关于将控制元素隐藏的方法
1.样式属性 display:none | block
2.通过标签控制属性 class Name ( 上面必须要有一个已经定义好的标签)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .box{ 8 100px; 9 height: 100px; 10 background-color: darkorchid; 11 } 12 /*提供不显示属性*/ 13 .hidden{ 14 display: none; 15 } 16 </style> 17 </head> 18 <body> 19 <button id="btn"> 按钮</button> 20 <div class="box" id="child"></div> 21 <script> 22 var oChild = document.getElementById("child"); 23 document.getElementById('btn').onclick = function () { 24 // 这里加的是将原先的类进行重新属性的定义 25 oChild.className += " hidden"; 26 // oChild.style.display = 'none'; 27 console.log(oChild.className); 28 //interHTML 可以识别局算计语言 innerText 只是以文档的形式进行识别 29 console.log(this.interHTML); 30 31 // console.log(this.innerText); 32 // 后面是每次添加的 33 this.innerHTML+= '<span> 了么 </span>' 34 35 } 36 </script> 37 38 </body> 39 </html>
4.DOM
关于节点的新增
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div class="m" id="m"> 9 10 </div> 11 <script> 12 <!--要想生成新节点 需要准备好事件源--> 13 var oBox = document.getElementById("m"); 14 //这里在新建一个节点 15 var oChild = document.createElement("div"); 16 17 oChild.className = "child"; 18 oChild.style.width = "200px"; 19 oChild.style.height = "200px"; 20 oChild.style.background = 'red'; 21 //将oChild 作为子元素 22 oBox.appendChild(oChild); 23 </script> 24 25 </body> 26 </html>
5.DOM
页面交替思想
在开始前将所有标签都视为无
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .active{ 8 background-color: red; 9 } 10 </style> 11 </head> 12 <body> 13 <button>按钮1</button> 14 <button>按钮2</button> 15 <button>按钮3</button> 16 <button>按钮4</button> 17 <button>按钮5</button> 18 <script> 19 <!--这里要是只有一个以类名为关键词需要索引[0]--> 20 var oBtns = document.getElementsByTagName("button"); 21 //这里可以一直循环节省代码冗余 22 for (var i=0; i<oBtns.length;i ++) { 23 24 25 oBtns[i].onclick = function () { 26 //这里是一种新的思想,在显示前将其他所有都视为没有属性 27 for (var j=0 ; j<oBtns.length;j++) { 28 oBtns[j].className= ''; 29 } 30 this.className = "active"; 31 } 32 } 33 </script> 34 35 36 37 </body> 38 </html>
6.关于hover 的dom 形式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #bar{ 8 50px; 9 height: 50px; 10 background-color: yellow; 11 } 12 .aaa{ 13 100px; 14 height: 100px; 15 background-color: darkcyan; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="bar">战旗 21 <div class="aaa"></div> 22 </div> 23 <script> 24 var a1 = document.getElementById("bar"); 25 a1.onmouseenter=function () { 26 this.children[0].style.display = "block"; 27 28 }; 29 var a1 = document.getElementById("bar"); 30 a1.onmouseleave=function () { 31 this.children[0].style.display = "none"; 32 33 }; 34 35 36 37 </script> 38 39 </body> 40 </html>