DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等

如何添加、移除、移动、复制、创建和查找节点?

---

1. 创建节点

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. 添加节点

2.1 向父节点的childNodes的末尾添加子节点：appendChild(nodeInsert)
  若添加的节点已存在childNodes中，则把该节点转移到末尾来。
  栗子见1.5
2.2 向父节点的childNodes的其他子节点前插入子节点：insertBefore(nodeInsert, nodeExist);
  当第二个参数为null时，insertBefore(nodeInsert, null)效果等同appendChild() 
2.3 通过innerHTML属性 添加节点（或者说替换子树）
  栗子： node.innerHTML = "
I become node by innerHTML
"；

3. 复制节点

3 复制节点 cloneNode(bool)
栗子： nodeA.clone(ture);
  参数为布尔值，参数设为true则进行深复制，会复制nodeA节点及其整个子树；参数为false进行浅复制，只复制nodeA节点；
  ps:cloneNode()并不复制js属性，但IE会复制相关事件处理程序

4. 替换节点

4 替换节点 replaceChild(newNode, oldNode)
  栗子：oldNode.parentNode.replaceChild(newNode, oldNode);

5. 移除节点

5 移除节点 removeChild(nodeA)
  栗子：nodeA.parentNode.removeChild(nodeA);

6. 查找节点-遍历

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()