DocumentFragment批量操作dom

Posted 2020-10-11 等风来

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/