- DocumentFragment，文档片段接口，表示一个没有父对象的最小文档对象。
- 它被作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。
- 最常用的方法是使用 DocumentFragment 创建并组成一个 DOM 子树，然后使用 Node 接口方法（如：appendChild() 或 insertBefore()）将其插入到 DOM 中。这种情况下会插入片段的所有子节点，并留下一个空的 DocumentFragment。因为所有的节点会被一次插入到文档中，所以仅会发生一个重渲染的操作，而不是每个节点分别被插入到文档中从而发生多次重渲染的操作。
- 该接口在 Web 组件（Web components）中也非常有用：<template> 元素在其 HTMLTemplateElement.content 属性中包含了一个 DocumentFragment。
- 可以使用 document.createDocumentFragment 方法或者构造函数来创建一个空的 DocumentFragment。
|
构造函数 |
说明 |
|
DocumentFragment() |
创建一个新的 CustomEvent。 |
- DocumentFragment 对象有以下属性：
|
属性 |
说明 |
状态 |
|
childElementCount |
childElementCount返回所有属于 DocumentFragment 的 Element 类型的子对象。 |
只读 |
|
children |
返回一个实时的 HTMLCollection，其中包含了所有属于 DocumentFragment 的 Element 类型的子对象。 |
只读 |
|
firstElementChild |
返回 DocumentFragment 的第一个 Element 类型的子对象，如果没有则返回 null |
只读 |
|
lastElementChild |
返回 DocumentFragment 的最后一个 Element 类型的子对象，如果没有则返回 null |
只读 |
DocumentFragment 对象有以下方法：
|
方法 |
说明 |
|
append() |
在文档片段的最后一个子对象后插入一组 Node 或字符串对象。 |
|
prepend() |
在文档片段的第一个元素前插入一组 Node 或字符串对象 |
|
querySelector() |
返回在 DocumentFragment 中以文档顺序排列的第一个符合指定选择器的 Element 节点。 |
|
querySelectorAll() |
返回在 DocumentFragment 中所有的符合指定选择器的 Element 节点组成的 NodeList 数组。 |
|
getElementById() |
返回在 DocumentFragment 中以文档顺序排列的第一个符合指定 ID 选择器的 Element 节点。与 Document.getElementById() 作用相同 |
来自 <https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment#%E8%A7%84%E8%8C%83>