第30天：DOM对象操作
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>腾讯云开发者
