DocumentFragment

构造函数

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

结果

规范

浏览器兼容性