DocumentFragment

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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