DocumentFragment 节点不属于文档树,继承的 parentNode 属性总是 null。
不过它有一种特殊的行为,该行为使得它非常有用,即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作
同时我们了解到当需要对页面DOM进行操作的时候必然会导致多次 重绘、回流(什么是重绘,回流?)。这样会加大页面的负担。影响页面性能。因此我们可以创建这样一个临时占位符。
语法
var docFragment = document.createDocumentFragment();
docFragment是一个对空文档片段 DocumentFragment
对象的引用。
描述
DocumentFragment
s 是一些DOM节点。它们不是DOM树的一部分。通常的使用场景是创建一个文档片段,然后将创建的DOM元素插入到文档片段中,最后把文档片段插入到DOM树中。在DOM树中,文档片段会被替换为它所有的子元素。
因为文档片段存在于内存中,并不在DOM树中,所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此,使用文档片段document fragments 通常会起到优化性能的作用(better performance)。
例子
var ulList = document.getElementByTagName("ul")[0];
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];
browserList.forEach(function(e){
var liDom = document.createElement("li");
liDom .textContent = e;
docfrag.appendChild(liDom );
});
ulDom.appendChild(docfrag);