DOM的节点操作

一、节点关系

childNodes
父节点.childNodes 访问父节点下的所有子节点
nodeType
标签节点 nodeType 返回值是 1
文本节点 nodeType 返回值是 3
注释（comment）节点 nodeType 返回值是 8
Document节点 nodeType 返回值是 9
DTD 节点nodeType 返回值是 12
在IE6、7、8中他们获取的子节点没有文本节点；在高级浏览器中子节点包括所有的节点：注释节点、文本节点、标签节点。
IE67会吧空白节点当做没有节点，高级浏览器会当做文本节点
nodeValue
它是专门获取或修改文本节点的属性
标签节点获取或修改属性是innerHTML；
parentNode
子节点.parentNode 它是获取节点的亲父节点的属性
文本节点和注释节没有子节点。也就是他们不能做为父节点
nextSibling
目标节点.nextSibling 表示下一个亲兄弟（包括注释、文本、标签）
previousSibling
目标节点.previousSibling 获取目标节点的上一个亲兄弟节点

二、DOM的节点操作

创建节点
Document.createElement(“标签名”) //创建节点
父亲.appendChild(新儿子) //节点上树
var oDiv = document.createElement("div");
document.body.appendChild(oDiv);

将一个已上树的节点appendChild();
初始：

<div id="father1">
    <p id="p0">son1</p>
    <p id="p1">son2</p>
    <p id="p2">son3</p>
</div>
<div id="father2"></div>

执行appendChild():

var father2 = document.getElementById("father2");
    var p2 = document.getElementById("p2");
    father2.appendChild(p2);

结果：

<div id="father1">
    <p id="p0">son1</p>
    <p id="p1">son2</p>
</div>
<div id="father2">
    <p id="p2">son3</p>
</div>

动态创建节点的一个坑：getElementsByTagName是动态的获取节点，而querySelectorAll是静态的获取节点。

向前插入节点 insertBefore
父亲.insertBefore(新儿子，已有儿子);
移除节点
原生的JS中，节点不能自杀，只能被父亲杀掉。
父亲.removeChild(儿子);

替换节点
父亲.replaceChild(新儿子，老儿子);
将一个DIV中的内容克隆到另一个中：

HTML结构：
<ul id="box1">
    <li>川贝</li>
    <li>白芍</li>
    <li>红花</li>
    <li>陈皮</li>
    <li>人参</li>
</ul>
<ul id="box2">

</ul>

JS脚本：

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var lis  = box1.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
    console.log(lis[i].cloneNode(true));
    box2.appendChild(lis[i].cloneNode(true));
};
// console.log(box1.cloneNode(true));
// box2.appendChild(box1.cloneNode(true));

cloneNode(true)和cloneNode()区别：前者能克隆节点中所有的内容，后者只能克隆标签。
innerHTML 也能克隆，但是字符串方式的克隆。

一、节点关系
二、DOM的节点操作

一、节点关系

二、DOM的节点操作

FEATURED TAGS