DocumentFragment
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
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 # interface-documentfragment |
浏览器兼容性
Loading…