JS的节点操作：创建、增加、删除、复制、查找

节点分成两种：文本节点，元素节点，大部分情况，我们只要元素节点。可以通过nodeType判断节点的类型，nodeType==3 是文本节点，nodeType==1 是元素节点。下面是节点的几种操作。

1、创建节点：createElement()

接受一个参数，为要创建的标签名。

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

2、增加节点：appendChild()、insertBefore()

appendChild()接受一个参数，即要增加的节点；

insertBefore()接受两个参数，第一个是要插入的节点，第二个是参照节点，返回要添加的元素节点

oXi.innerHTML='西瓜';
oList.appendChild(oXi);//用于向children列表的末尾添加一个节点

oBl.innerHTML='菠萝';
oList.insertBefore(oBl,oAl);//向指定位置添加一个节点，如果不是在末尾插入节点，而是想放在特定的位置上，用这个方法

创建节点要和增加节点配合使用，创建节点只是生成了节点，但还没有加入到页面中，通过增加节点appendChild添加后才会出现到页面中。

appendChild() 方法还可以添加已经存在的元素，会将元素从原来的位置移到新的位置

ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾

3、删除节点：removeChild()

接受一个参数，为要删除的节点。通过父节点找到并删除子节点。

<div id="div1">
<p id="p1">这是一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);//父节点.removeChild(子节点)
</script>

4、复制节点：cloneNode()

用于复制节点， 接受一个布尔值参数， true 表示深复制（复制节点及其所有子节点）， false 表示浅复制（复制节点本身，不复制子节点）

var oList=document.getElementById('list'); //获得ul
var aUls= oList.cloneNode(true); //深复制
var aUlq = oList.cloneNode(false); //浅复制

5、替换节点：replaceChild()

用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要替换的节点，返回被替换的节点。

oList.replaceChild(aaa,aLi[1]);

6、查找节点

1）childNodes 返回指定节点的子节点集合，包括文本节点和元素节点，通过不用这种方法获取子节点，而用children；

2）children 返回指定节点的子节点集合，只包括元素节点；

备注：可以使用 length 属性来确定子节点的数量，然后遍历所有的子节点并提取需要的信息；

3）parentNode 返回指定节点的父节点，如果没有父节点则返回null；

4）firstChild 返回指定节点的首个子节点，IE兼容；firstElementChild 返回指定节点的首个子节点，非IE兼容；

5）lastChild 返回指定节点的尾节点，IE兼容； lastElementChild 返回指定节点的尾节点，非IE兼容；

4）nextSibling 返回指定节点的下一个兄弟节点，IE兼容；nextElementSibling 返回指定节点的下一个兄弟节点，非IE兼容；如果没有下一个兄弟节点则返回null；

5）previousSibling 返回指定节点的上一个兄弟节点，IE兼容；previousElementSibling 返回指定节点的上一个兄弟节点，非IE兼容；如果没有上一个兄弟节点则返回null；

封装获取兄弟节点兼容性问题的方法：（首尾节点方法同）

function nextsibling(ele){
if(ele.nextElementSibling){
return ele.nextElementSibling;
}
else{
return ele.nextSibling;
}
}
nextsibling(aLi[1]).style.background='red';//方法调用
function previoussibling(ele){
if(ele.previousElementSibling){
return ele.previousElementSibling;
}
else{
return ele.previousSibling;
}
}