907
document.createElement()和document.createDocumentFragment()的比較
我的上一篇文章[https://yq.aliyun.com/articles/73029?spm=5176.8091938.0.0.Ie2SsZ](DOM操作方法)中提到了：document.createElement()和document.createDocumentFragment()，雖說我們平時可以把兩者混著用，但是還是得明白兩者之間的區別：
一.在DOM操作中document.createElement()每次創建的都是一個DOM節點，所以每次都要執行把節點添加到document.body(或其後的節點)中的操作，這樣對於一個小程序運行時沒有問題的，但如果他調用了十次甚至一百次一千次document.body.appendChild()，每次都要產生一次頁麵刷新，這樣就會產生很多頁麵碎片，而此時就體現出了document.createDocumentFragment()的重要性。
document.createDocumentFragment()是創建一個文檔片段，把所有的新節點附加其上，然後把文檔碎片的內容一次性添加到document中，這樣不管要添加多少個節點都隻需要最後添加的時候調用一次，這意味著隻需要進行一次頁麵的刷新，需要的時間顯然會比前麵的要少。
eg：第一段代碼用document.createElement()來實現，如下：
for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
document.body.appendChild(p);
}
第二段代碼用document.createDocumentFragment()來實現，如下：
var oFragment = document.createDocumentFragment();
for(var i = 0 ; i < 10; i ++) {
var p = document.createElement("p");
var oTxt = document.createTextNode("段落" + i);
p.appendChild(oTxt);
oFragment.appendChild(p);
}
document.body.appendChild(oFragment);
很明顯可以驗證第二種方法比第一種方法節省時間
二.reateElement創建的元素可以使用innerHTML，createDocumentFragment創建的元素使用innerHTML並不能達到預期修改文檔內容的效果，隻是作為一個屬性而已。兩者的節點類型完全不同，並且createDocumentFragment創建的元素在文檔中沒有對應的標記，因此在頁麵上隻能用js中訪問到
三.另一個最主要的區別就是createElement創建的元素可以重複操作，添加之後就算從文檔裏麵移除依舊歸文檔所有，可以繼續操作，但是createDocumentFragment創建的元素是一次性的，添加之後再就不能操作了（說明：這裏的添加並不是添加了新創建的片段，因為上麵說過，新創建的片段在文檔內是沒有對應的標簽的，這裏添加的是片段的所有子節點）。
最後更新：2017-04-01 17:58:18