今天學習了原生js的dom節點的操作，就記錄下來，僅供自己以后參考。
1)創建節點：除了可以使用createElement創建元素，也可以使用createTextNode創建文本節點.
document.body指向的是<body>元素;document.documentElement則指向<html>元素
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
document.body.appendChild(createNode);
document.documentElement.appendChild(createNode);
2)插入節點：可以使用appendChild，insertBefore，insertBefore接收兩個參數，第一個是插入的節點，第二個是參照節點，如insertBefore(a,b)，則a會插入在b的前面
var createNode = document.createElement("div");
var createTextNode = document.createTextNode("hello world");
createNode.appendChild(createTextNode);
var div1 = document.getElementById("div1");
document.body.insertBefore(createNode,div1);
3)替換和刪除元素，從replaceChild和removeChild的字面意思看，就是刪除子節點，因此調用者，需要包含子節點div1，不然調用會報錯。返回的節點是替換的或刪除的元素，被替換/刪除的元素仍然存在，但document中已經沒有他們的位置了。
var replaceChild = document.body.replaceChild(createNode,div1);
var removeChild = document.body.removeChild(div1);
4)節點的屬性：
firstChild:第一個子節點
lastChild:最后一個子節點
childNodes:子節點集合，獲取其中子節點可以someNode.childNodes[index]或者someNode.childNodes.item(index)
nextSibling:下一個兄弟節點
previousSibling：上一個兄弟節點
parentNode：父節點
var ul = document.getElementById("ul");
var firstChild = ul.firstChild;
console.log(firstChild.innerHTML);
var lastChild = ul.lastChild;
console.log(lastChild.innerHTML);
var length = ul.childNodes.length;
console.log(length);
var secondChild = ul.childNodes.item(1);
console.log(secondChild.innerHTML);
var forthChild = ul.childNodes.item(2).nextSibling;
console.log(forthChild.innerHTML);
var thridChild = forthChild.previousSibling;
console.log(thridChild.innerHTML);
var parentNode = forthChild.parentNode;
console.log(parentNode.innerHTML);
5) 文檔片段，好處在於減少dom的渲染次數，可以優化性能。
var fragment = document.createDocumentFragment();
var ul = document.getElementById("ul");
var li = null;
for ( var i = 4; i >= 0; i--) {
li = document.createElement("li");
li.appendChild(document.createTextNode("item "+i));
fragment.appendChild(li);
}
ul.appendChild(fragment);
6）克隆元素
someNode.cloneNode(true):深度克隆，會復制節點及整個子節點
someNode.cloneNode(false):淺克隆，會復制節點，但不復制子節點
var clone = ul.cloneNode( true);
document.body.appendChild(clone);
注意：
1、childNodes.length存在跨瀏覽器的問題
可以看到有關列表的html片段沒有用
< li >sdsssssss </ li >
< li >qqqq </ li >
< li >wwww </ li >
< li >eeee </ li >
</ ul >
這種書寫格式而是使用沒有換行的格式書寫，是因為在不同的瀏覽器中，獲取ul.childNodes.length的結果有差異：
在ie中，ul.childNodes.length不會計算li之間的換行空格，從而得到數值為4
在ff、chrome,safari中，會有包含li之間的空白符的5個文本節點，因此ul.childNodes.length為9
若要解決跨瀏覽器問題，可以將li之間的換行去掉，改成一行書寫格式。
2、cloneNode存在跨瀏覽器的問題
在IE中，通過cloneNode方法復制的元素，會復制事件處理程序，比如，var b = a.cloneNode(true).若a存在click,mouseover等事件監聽，則b也會擁有這些事件監聽。
在ff,chrome,safari中，通過cloneNode方法復制的元素，只會復制特性，其他一切都不會復制
因此，若要解決跨瀏覽器問題，在復制前，最好先移除事件處理程序。