DocumentFragment

DocumentFragment 接口表示一个没有父节点的最小文档对象。

它用作 Document 的轻量级版本，用于存储文档结构的一部分，该结构由节点组成，就像标准文档一样。关键区别在于文档片段不是活动文档树结构的一部分。对片段进行的更改不会影响文档。

构造函数

DocumentFragment(): 创建并返回一个新的 DocumentFragment 对象。

实例属性

此接口没有特定属性，但继承了其父级 Node 的属性。

DocumentFragment.childElementCount 只读: 返回 DocumentFragment 具有的子 元素 的数量。
DocumentFragment.children 只读: 返回一个实时的 HTMLCollection，其中包含作为 DocumentFragment 对象子节点的所有类型为 Element 的对象。
DocumentFragment.firstElementChild 只读: 返回作为 DocumentFragment 对象第一个子节点的 Element，如果不存在则返回 null。
DocumentFragment.lastElementChild 只读: 返回作为 DocumentFragment 对象最后一个子节点的 Element，如果不存在则返回 null。

实例方法

此接口继承了其父级 Node 的方法。

DocumentFragment.append(): 在文档片段的最后一个子节点之后插入一组 Node 对象或字符串。
DocumentFragment.prepend(): 在文档片段的第一个子节点之前插入一组 Node 对象或字符串。
DocumentFragment.querySelector(): 返回 DocumentFragment 内第一个与指定选择器匹配的 Element 节点（按文档顺序）。
DocumentFragment.querySelectorAll(): 返回 DocumentFragment 内所有与指定选择器匹配的 Element 节点的 NodeList。
DocumentFragment.replaceChildren(): 用指定的新子节点集替换 DocumentFragment 的现有子节点。
DocumentFragment.getElementById(): 返回 DocumentFragment 内第一个与指定 ID 匹配的 Element 节点（按文档顺序）。在功能上等效于 Document.getElementById()。

使用说明

DocumentFragment 的常见用途是创建一个，在其中组装一个 DOM 子树，然后使用 Node 接口方法（如 appendChild()、append() 或 insertBefore()）将片段附加或插入到 DOM 中。这样做会将片段的节点移动到 DOM 中，留下一个空 DocumentFragment。

此接口对于 Web 组件也非常有用：<template> 元素在其 HTMLTemplateElement.content 属性中包含一个 DocumentFragment。

可以使用 document.createDocumentFragment() 方法或构造函数创建空 DocumentFragment。

性能

DocumentFragment 的性能优势通常被夸大了。事实上，在某些引擎中，使用 DocumentFragment 比在循环中附加到文档慢，如此基准测试所示。但是，这些示例之间的差异非常小，因此最好优化可读性而不是性能。

示例

HTML

html

<ul></ul>

JavaScript

const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.append(li);
}

ul.append(fragment);

结果

规范

规范
DOM 标准 # interface-documentfragment

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。