View in EnglishAlways switch to English

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

html

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