如何添加、移除、移动、复制、创建和查找节点?
- 创建节点
1.1 创建元素节点：createElement()
栗子： var p = document.createElement("p");
p.nodeType;//1
1.2 创建文本节点： createTextNode()
栗子：var textNode = document.createTextNode("I am text node");
textNode.nodeType;//3
1.3 文本节点的合并：normalize()
在父节点调用，父节点的两个相邻的文本子节点会合成一个文本节点。
1.4 文本节点的分割：splitText(参数)
参数为一个以0开始的文本下标索引。以此分割，参数左为一个文本节点，参数及右为另一个文本节点。
1.5 ->1.3和1.4的栗子：
var p = document.createElement("p");
var textNode = document.createTextNode("I am text node");
//appendChild()
p.appendChild(textNode);
//分割
var newTextNode = p.firstChild.splitText(5);
p.firstChild.nodeValue;//"I am "
p.lastChild.nodeValue;//"text node"
newTextNode.nodeValue;//"text node"
//合并
p.normalize();
p.firstChild.nodeValue;//"I am text node"
- 添加节点
2.1 向父节点的childNodes的末尾添加子节点：appendChild(nodeInsert)
若添加的节点已存在childNodes中，则把该节点转移到末尾来。
栗子见1.5
2.2 向父节点的childNodes的其他子节点前插入子节点：insertBefore(nodeInsert, nodeExist);
当第二个参数为null时，insertBefore(nodeInsert, null)效果等同appendChild()
2.3 通过innerHTML属性 添加节点（或者说替换子树）
栗子： node.innerHTML = "<p>I become node by innerHTML</p>"；
- 复制节点
3 复制节点 cloneNode(bool)
栗子： nodeA.clone(ture);
参数为布尔值，参数设为true则进行深复制，会复制nodeA节点及其整个子树；参数为false进行浅复制，只复制nodeA节点；
ps:cloneNode()并不复制js属性，但IE会复制相关事件处理程序
- 替换节点
4 替换节点 replaceChild(newNode, oldNode)
栗子：oldNode.parentNode.replaceChild(newNode, oldNode);
- 移除节点
5 移除节点 removeChild(nodeA)
栗子：nodeA.parentNode.removeChild(nodeA);
- 查找节点-遍历
6 查找结点从某种程度上来说（除了之前介绍的通过DOM的常规属性来找）应该就是遍历了吧
6.0 NodeIterator类型和TreeWalker类型（“DOM 2级遍历和范围”模块中定义的）
6.1 NodeIterator
6.1.1创建：var aNodeIterator = document.createNodeIterator(root，whatToShow, filter, false)
6.1.2方法：aNodeIterator.nextNode()最先指向root,然后随遍历改变，即向前遍历的前方前进一步
还有一个preciousNode(),指向遍历的前一个节点。
6.1.3参数：
root:遍历开始的根节点
whatToShow:想要访问的节点类型，如： NodeFilter.SHOW_ELEMENT表示元素节点类型
filter:一个表示拒绝还是接受的某种节点的函数(例：filterA)，或者一个包含acceptNode方法的NodeFilter对象(例：filterB)，或者为空（只让whatToShow参数去过滤）。
filterA: 函数，过滤掉不是标签不是div的所有元素节点
var filterA = function(node){
return node.tagName.toLowerCase() == 'div' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
filterB: 对象
var filterB = {
acceptNode: function(node){
return node.tagName.toLowerCase() == 'div' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
}
6.2 TreeWalker
6.2.1创建：var aTreeWalker= document.createTreeWalker(root，whatToShow, filter, false)
6.2.2和NodeIterator的不同：
filter返回的NodeFilter.FILTER_REJECT会跳过遍历中之后的整个子树，而在NodeIterator是和NodeFilter.FILTER_SKIP一样跳过当前结点。
TreeWalker可以通过下列方法在DOM延任何方向移动：
parentNode()//遍历到当前结点的父节点
firstChild()
lastChild()
nextSibling()
previousSibling()
