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>
