[DOM] JavaScript常见DOM操作

1. insertBefore

//将newNode添加到referenceNode前，作为parentNode的子节点。
var insertedNode = parentNode.insertBefore(newNode, referenceNode);

注：
（1）如果referenceNode==null（null或undefined），则newNode将插入到parentNode的所有子节点末尾。相当于， appendChild。
（2）referenceNode不是可选参数，必须提供，即使为null。
（3）如果newNode是文档中已有的元素，则insertBefore是对该元素的剪切操作。
（4）没有insertAfter函数，但是可以用以下方式模拟

parentNode.insertBefore(newNode,referenceNode.nextSibling);
//其中，如果referenceNode是最后一个子元素，则referenceNode.nextSibling===null。

2. cloneNode

//cloneNode返回node的一个副本
var dupNode = node.cloneNode(deep);

注：
deep是可选参数，如果deep是一个真值，则表示复制所有的后代元素，否则只复制当前node元素。

3. contains

//返回一个布尔值，表明otherNode是否node的后代元素。
node.contains(otherNode)

注：
该方法判断的是所有后代元素，不止是子元素。

4. normalize

//规范化给定node的所有子节点树，即，删除空TextNode，合并相邻的TextNode
node.normalize()

例如：

var wrapper = document.createElement("div");

wrapper.appendChild(document.createTextNode("Part 1 "));
wrapper.appendChild(document.createTextNode("Part 2 "));

// At this point, wrapper.childNodes.length === 2
// wrapper.childNodes[0].textContent === "Part 1 "
// wrapper.childNodes[1].textContent === "Part 2 "

wrapper.normalize();

// Now, wrapper.childNodes.length === 1
// wrapper.childNodes[0].textContent === "Part 1 Part 2 "