DocumentFragment批量操作dom

看風景就發表於2017-10-21
Fragment

DocumentFragment，文件片段，不屬於文件樹，其parentNode為null。
當把一個DocumentFragment節點插入文件樹時，插入的不是DocumentFragment自身，
而是它的所有子孫節點。這使得DocumentFragment成了有用的佔位符，暫時存放那些
一次插入文件的節點。它還有利於實現文件的剪下、複製和貼上操作。

DocumentFragment批量插入節點示例

<ul id="list"></ul>
// Create the fragment
var frag = document.createDocumentFragment();

// Create numerous list items, add to fragment
for(var x = 0; x < 10; x++) {
　　var li = document.createElement("li");
　　li.innerHTML = "List item " + x;
　　frag.appendChild(li);
}

// Mass-add the fragment nodes to the list
listNode.appendChild(frag);

多數情況下，DocumentFragment效能優於innerHTML，在移動端瀏覽器的個別情形下，
innerHTML更優。

高效將html字串轉換為文件碎片DocumentFragment

//createContextualFragment高效方法
var str='<div><strong>test</strong></div>';
var range=document.createRange();
range.selectNodeContents(document.documentElement); 
var fragment =range.createContextualFragment(str);
document.body.appendChild(fragment);
//傳統innerHTML方法，效能稍遜
var str = '<div class="calendar" id="pager-top"><a rel="prev" href="##" class="prev">aaa</a> <span class="edit-in-place-add"></span></div> ';
var div = document.createElement('div');
div.innerHTML = str;
var fragment = document.createDocumentFragment();
// 將div上的節點轉移到文件碎片上
while((firstChild = div.firstChild)){ 
    fragment.appendChild(firstChild);
}

 

 

參考：http://kb.cnblogs.com/page/97567/

相關文章