第30天：DOM对象操作_dom 的孩子-CSDN博客

本文链接：https://blog.csdn.net/lelara/article/details/84577498

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节点，所有属性，文本节点
火狐，谷歌高版本会把换行也看作是子节点

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

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

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

1，创建节点
var div文件。creatElement（“li”）; //生成一个新的li标签

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

3，移除节点
removeChild（）; //孩子节点
demo.removeChild（DA）;

4，克隆节点
cloneNode（）;
也。就是复制节点
括号里面可以加参数，如果里面是真实的，深层复制，除了复制本盒子，复制还子节点
如果为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>