DocumentFragment

构造函数

DocumentFragment()

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

实例属性

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

DocumentFragment.childElementCount 只读

返回 DocumentFragment 中子 元素 的数量。

DocumentFragment.children 只读

返回一个包含 DocumentFragment 对象的所有类型为 Element 的子节点的实时 HTMLCollection。

DocumentFragment.firstElementChild 只读

返回 DocumentFragment 对象的第一个子 Element，如果没有则返回 null。

DocumentFragment.lastElementChild 只读

返回 DocumentFragment 对象的最后一个子 Element，如果没有则返回 null。

实例方法

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

DocumentFragment.append()

在文档片段的最后一个子节点之后插入一组 Node 对象或字符串。

DocumentFragment.prepend()

在文档片段的第一个子节点之前插入一组 Node 对象或字符串。

DocumentFragment.querySelector()

在文档片段中，按文档顺序查找与指定选择器匹配的第一个 Element 节点。

DocumentFragment.querySelectorAll()

在文档片段中，查找与指定选择器匹配的所有 Element 节点，并返回一个 NodeList。

DocumentFragment.moveBefore()

将给定的 Node 作为直接子节点移动到调用它的 DocumentFragment 中，位于给定的参考节点之前，而无需先移除再插入该节点。

DocumentFragment.replaceChildren()

用指定的新子节点集替换 DocumentFragment 中现有的子节点。

DocumentFragment.getElementById()

在文档片段中，按文档顺序查找与指定 ID 匹配的第一个 Element 节点。功能上等同于 Document.getElementById()。

用法说明

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

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

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

性能

DocumentFragment 的性能优势常常被夸大。事实上，在某些引擎中，使用 DocumentFragment 比在循环中直接追加到文档中更慢，正如此基准测试所示。然而，这些示例之间的差异如此微小，以至于最好优化可读性而不是性能。

示例

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);

结果

规范

浏览器兼容性