DocumentFragment - 表示没有父节点的最小文档对象

DocumentFragment 接口表示没有父节点的最小文档对象。它被当做一个轻量版的 Document 使用，它存储由节点组成的文档结构段，就像标准文档一样。关键的区别在于，由于文档片段不是活动文档树结构的一部分，因此对片段所做的更改不会影响文档，导致 reflow 或在进行更改时产生任何性能影响。

DocumentFragment 的一个常见用途是创建一个片段，在其中组装 DOM 子树，然后使用 Node 接口方法（例如 appendChild() 或 insertBefore()）将片段追加或插入到 DOM 中。这样做会将片段的节点移动到 DOM 中，留下一个空的 DocumentFragment 。由于所有节点一次都插入到文档中，只触发一次 reflow 和 render，而不是每个节点插入都触发一次 reflow 和 render。

该接口也非常适用于 Web 组件：<template> 元素在其 HTMLTemplateElement.content 属性中包含 DocumentFragment 。

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

属性

该接口没有特定属性，但继承了其父级 Node 的属性，并实现了 ParentNode 接口的属性。

ParentNode.children 只读

返回一个实时 HTMLCollection，其中包含 DocumentFragment 对象的子类的 Element 类型的所有对象。

ParentNode.firstElementChild 只读

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

ParentNode.lastElementChild 只读

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

ParentNode.childElementCount 只读

返回一个 unsigned long ，表示 DocumentFragment 具有的子元素数。

构造函数

DocumentFragment()

返回一个空的 DocumentFragment 对象。

方法

该接口继承其父级 Node 的方法，并实现了 ParentNode 接口的方法。

DocumentFragment.querySelector()

以文档顺序返回 DocumentFragment 中与指定选择器匹配的第一个 Element 节点。

DocumentFragment.querySelectorAll()

返回 DocumentFragment 中与指定选择器匹配的所有 Element 节点的 NodeList。

DocumentFragment.getElementById()

以文档顺序返回 DocumentFragment 中与指定 ID 匹配的第一个 Element 节点。

规范

规范	状态	备注
DOM DocumentFragment 的定义	现行的标准	增加了 ParentNode 的构造函数和实现。
Selectors API Level 1 DocumentFragment 的定义	已过时	增加了 querySelector() 和 querySelectorAll() 方法。
Document Object Model (DOM) Level 3 Core Specification DocumentFragment 的定义	已过时	自从 Document Object Model (DOM) Level 2 Core Specification 以来没有变化
Document Object Model (DOM) Level 2 Core Specification DocumentFragment 的定义	已过时	自从 Document Object Model (DOM) Level 1 Specification 以来没有变化
Document Object Model (DOM) Level 1 Specification DocumentFragment 的定义	已过时	初始定义

桌面浏览器兼容性

移动浏览器兼容性