第30天：DOM对象操作

半指温柔乐

发布于 2018-09-11 06:55:59

43600

代码可运行

文章被收录于专栏：前端知识分享前端知识分享

运行总次数：0

代码可运行

JS包括三部分：ECMAscript、DOM（文档对象）、BOM（浏览器对象）

一、DOM（文档对象） DOM树节点(元素、属性、标签、标记等都是节点）

二、访问节点

documment.getElementById() documment.getElementsByTagName() documment.getElementsByClassName() //主流浏览器支持，IE6、7、8不兼容

三、节点访问关系 1、父节点：parentNode 2、兄弟节点： 下一个兄弟： nextSibling //IE6、7、8认识 nextElementSibling //其他浏览器认识同理：上一个兄弟 previousSibling //IE6、7、8认识 previousElementSibling //其他浏览器认识

兼容写法 var one=document.getElementById("one"); var div=one.nextElementSibling||one.nextSibling;//先普通浏览器再IE div.style.backgroundColor="red";

3、子节点 firstChild firstElementChild 兼容：one.firstElementChild||one.firstChild lastChild lastElementChild 同上

4、孩子节点 childNodes 选出全部的孩子（嫡出） childNodes：标准属性，返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 火狐、谷歌高版本会把换行也看作是子节点

利用 nodeType==1 时才是元素节点，通过这个来获取元素节点

5、children 选取所有的孩子，只包括元素节点（庶出） IE6、7、8包含注释节点，这个要避免开，去掉注释

四、DOM节点操作 新建、插入、删除、克隆节点等等

1、创建节点 var div document.creatElement("li");//生成一个新的li标签

2、插入节点 （1）appendChild();添加孩子到某个盒子的最后面（2）insertBefore(插入的节点，参照节点)；两个参数必写 demo.insertBefore(test,childrens[0]);//放到第一个孩子的前面如果第二个参数为null，则默认新生成的盒子放到最后面 demo.insertBefore(test,null);

3、移除节点 removeChild() ; //孩子节点 demo.removeChild(da);

4、克隆节点 cloneNode(); 也就是复制节点括号里面可以加参数，如果里面是true，深层复制，除了复制本盒子，还复制子节点如果为false,浅层复制，只复制本节点，不复制子节点

案例：

1、孩子节点

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>孩子节点</title>
 6     <script>
 7         window.onload=function(){
 8             //childNodes用法
 9             /*var ul=document.getElementById("ul");
10             var childrens=ul.childNodes;//选择全部孩子
11             //alert(childrens.length);//7
12             for(var i=0;i<childrens.length;i++){
13                 if(childrens[i].nodeType==1){
14                     childrens[i].style.backgroundColor="blue";
15                 }
16             }*/
17             
18             //children用法
19             var ul=document.getElementById("ul");
20             var childrens=ul.children;//选择所有孩子，只有元素节点
21             alert(childrens.length);
22 
23         }
24     </script>
25 </head>
26 <body>
27 <ul id="ul">
28     <li>123456</li>
29     <li>123456</li>
30     <li>123456</li>
31 </ul>
32 </body>
33 </html>

2、DOM节点操作

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>DOM节点操作</title>
 6     <script>
 7         window.onload=function(){
 8             var demo=document.getElementById("demo");
 9             var childrens=demo.children;
10             //创建节点
11             var firstDiv=document.createElement("div");
12             //添加节点
13             demo.appendChild(firstDiv);
14             var test =document.createElement("div");
15             //children[0]就是xiongda
16             demo.insertBefore(test,childrens[0]);
17             //demo.insertBefore(test,null);//若无参照点，则为null,新添加的放到最后面
18 
19             //移除节点
20             var da=document.getElementById("xiongda");
21             demo.removeChild(da);
22 
23             //复制节点
24             var last= childrens[0].cloneNode();
25             demo.appendChild(last);
26             demo.parentNode.appendChild(demo.cloneNode(true));
27         }
28     </script>
29 </head>
30 <body>
31 
32     <div id="demo">
33         <div id="one"></div>
34         <div id="xiongda"></div>
35     </div>
36 <!--<nav></nav>-->
37 </body>
38 </html>