DOM操作-創建、添加、移除、移動、複製和查找節點等

參考資料：
https://www.jianshu.com/p/a44327733513
https://blog.csdn.net/fouerror/article/details/80710111
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 = "<p>I become node by innerHTML</p>"；

3、複製節點

3 複製節點 cloneNode(bool)
栗子： nodeA.cloneNode(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、獲取節點集合

假設當前對象爲node 

返回父節點：node.parentNode
返回所有子節點：node.childNodes（包含文本節點及標籤節點）,node.children 
返回第一個子節點：node.firstChild 
返回最後一個子節點： node.lastChild 
返回同屬上一個子節點：node.nextSibling 
返回同屬下一個子節點：node.previousSibling 
是否有子節點： node.hasChildNodes()
返回父級元素：node.node.parendElement
返回下一個兄弟元素：node.nextElementSibling
返回上一個兄弟元素：node.previousElementSibling
返回第一個子元素：node.firstElementChild
返回最後一個子元素：node.lastElementChild
是否有子元素：判斷 node.children.length 
該節點下的所有文本：node.textContent
該節點下的文本： node.innerText