js DOM

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>

颜色