DocumentFragment
DocumentFragment
,文档片段接口,表示一个没有父对象的最小文档对象。
它被作为一个轻量版的 Document
使用,就像标准的 document 一样,存储由节点(nodes)组成的文档结构。与 document 相比,最大的区别是它不是真实 DOM 树的一部分,它的变化不会触发 DOM 树的重新渲染,且不会对性能产生影响。
构造函数
DocumentFragment()
-
创建并返回一个新的
DocumentFragment
对象。
属性
该接口没有特殊的属性,其属性都继承自 Node
。
DocumentFragment.childElementCount
只读-
返回所有属于
DocumentFragment
的Element
类型的子对象。 DocumentFragment.children
只读-
返回一个实时的
HTMLCollection
,其中包含了所有属于DocumentFragment
的Element
类型的子对象。 ParentNode.firstElementChild
只读-
返回
DocumentFragment
的第一个Element
类型的子对象,如果没有则返回null
。 ParentNode.lastElementChild
只读-
返回
DocumentFragment
的最后一个Element
类型的子对象,如果没有则返回null
。
方法
该接口继承 Node
的全部方法。
DocumentFragment.append()
-
在文档片段的最后一个子对象后插入一组
Node
或字符串对象。 DocumentFragment.prepend()
-
在文档片段的第一个元素前插入一组
Node
或字符串对象。 DocumentFragment.querySelector()
-
返回在
DocumentFragment
中以文档顺序排列的第一个符合指定选择器的Element
节点。 DocumentFragment.querySelectorAll()
-
返回在
DocumentFragment
中所有的符合指定选择器的Element
节点组成的NodeList
数组。 DocumentFragment.getElementById()
-
返回在
DocumentFragment
中以文档顺序排列的第一个符合指定 ID 选择器的Element
节点。与Document.getElementById()
作用相同。
使用说明
最常用的方法是使用 DocumentFragment
创建并组成一个 DOM 子树,然后使用 Node
接口方法(如:appendChild()
或 insertBefore()
)将其插入到 DOM 中。这种情况下会插入片段的所有子节点,并留下一个空的 DocumentFragment
。因为所有的节点会被一次插入到文档中,所以仅会发生一个重渲染的操作,而不是每个节点分别被插入到文档中从而发生多次重渲染的操作。
该接口在 Web 组件(Web components)中也非常有用:<template>
元素在其 HTMLTemplateElement.content
属性中包含了一个 DocumentFragment
。
可以使用 document.createDocumentFragment
方法或者构造函数来创建一个空的 DocumentFragment
。
示例
HTML
<ul id="list"></ul>
JavaScript
const list = document.querySelector("#list");
const fruits = ["Apple", "Orange", "Banana", "Melon"];
const fragment = new DocumentFragment();
fruits.forEach((fruit) => {
const li = document.createElement("li");
li.textContent = fruit;
fragment.appendChild(li);
});
list.appendChild(fragment);
结果
规范
Specification |
---|
DOM Standard # interface-documentfragment |
浏览器兼容性
BCD tables only load in the browser