节点操作

元素节点    nodeType：1，属性节点  nodeType：2，文本节点   nodeType：3   （常使用元素节点）

1.父级节点

　node.parentNode

　parentNode 属性可返回某节点的父节点，注意是最近的一个父节点

　如果指定的节点没有父节点则返回 null

2.子节点操作

　方式1：childNodes 获取所有子节点 包含元素节点  文本节点 等等    不建议使用

　方式2：children  获取所有子元素节点  也是实际开发中常用的

　var  ul = document.querySelector('ul');

　console.log( ul.children )；  // 输入ul下的所有  元素节点

3.子节点-第一个子元素和最后一个子元素

　方式1：firstChild  /  lastChild 第一个 /  最后一个子节点  包含 元素节点、文本节点

　方式2：firstElementChild /  lastElementChild  返回第一个 /  最后一个子元素节点   ie9才支持

　方式3：children[0]  /  children[ ol.children.length - 1 ]  实际开发的写法，既没有兼容性问题又返回第一个子元素

 4.兄弟节点

　方式1：node.nextSibling   返回当前元素的下一个兄弟节点，找不到返回null   包含所有节点

　　　　  node.previousSibling    返回当前元素的上一个兄弟节点，找不到返回null   包含所有节点

　方式2：node.nextElementSibling  返回当前元素的下一个兄弟元素节点  ，找不到返回null    （有兼容性问题，IE9以上支持）

　　　　  node.previousElementSibling  返回当前元素的上一个兄弟元素节点，找不到返回null

　解决兼容性问题，可以封装一个函数

　　function getNextElementSibling(element){

　　　　var  el  =  element;

　　　　while ( el = el.nextSibling ) {

　　　　　　if ( el.nodeType === 1 ) {

　　　　　　　　return  el;

　　　　　　}

　　　　}

　　　　return null;

　　}

5.创建节点和添加节点

　1.  动态创建元素节点

　　document.createElement('节点名称')   

　2. 添加节点

　　node.appendChild(child);    node 父级   child 子级    在后面追加元素，类似数组中的push

　　node.insertBefore(child，指定元素);   在指定元素前面添加元素

　　var  li = document .createElement('li');

　　ul.insertBefore( li,ul.children[0] );    给 ul 的第一个子元素的前面添加 一个 li

6.删除节点

　node.removeChild( child )　　方法从DOM中删除了一个子节点，返回删除的节点

7.复制节点（克隆节点）

　node.cloneNode();  括号为 空 或者里面是 false  浅拷贝  只复制标签不复制里面的内容

　node.cloneNode(true);  括号为 true  深拷贝  复制标签 复制里面的内容