DocumentFragment

在此页

构造函数
特性
方法
用法注意事项
范例
规范
浏览器兼容性
另请参阅
相关话题

DocumentFragment 接口表示没有父级的最小文档对象。它被用作轻量版本的 Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document (even on reflow ) or incur any performance impact when changes are made.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="../API/EventTarget.html" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="../API/DocumentFragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="346" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">DocumentFragment</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

构造函数

DocumentFragment(): 创建并返回新 DocumentFragment 对象。

特性

This interface has no specific properties, but inherits those of its parent, 节点 , and implements those of the ParentNode 接口。

ParentNode.children 只读: 返回实时 HTMLCollection containing all objects of type 元素 that are children of the DocumentFragment 对象。
ParentNode.firstElementChild 只读: 返回 元素 that is the first child of the DocumentFragment object, or null 若没有。
ParentNode.lastElementChild 只读: 返回 元素 that is the last child of the DocumentFragment object, or null 若没有。
ParentNode.childElementCount 只读: 返回 unsigned long giving the amount of children that the DocumentFragment has.

方法

This interface inherits the methods of its parent, 节点 , and implements those of the ParentNode interface .

DocumentFragment.querySelector(): 返回第一 元素 node within the DocumentFragment , in document order, that matches the specified selectors.
DocumentFragment.querySelectorAll(): 返回 NodeList of all the 元素 nodes within the DocumentFragment that match the specified selectors.
DocumentFragment.getElementById(): 返回第一 元素 node within the DocumentFragment , in document order, that matches the specified ID. Functionally equivalent to Document.getElementById() .

用法注意事项

A common use for DocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM using 节点 interface methods such as appendChild() or insertBefore() . Doing this moves the fragment's nodes into the DOM, leaving behind an empty DocumentFragment . Because all of the nodes are inserted into the document at once, only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.

This interface is also of great use with Web components: <template> elements contain a DocumentFragment in their HTMLTemplateElement.content 特性。

空 DocumentFragment 可以创建使用 document.createDocumentFragment() method or the constructor.

范例

HTML

<ul id="list"></ul>

JavaScript

var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']
var fragment = new DocumentFragment()
fruits.forEach(function (fruit) {
  var li = document.createElement('li')
  li.innerHTML = fruit
  fragment.appendChild(li)
})
list.appendChild(fragment)

结果

规范

规范	状态	注释
DOM The definition of 'DocumentFragment' in that specification.	实时标准	Added the constructor and the implementation of `ParentNode` .
Selectors API Level 1 The definition of 'DocumentFragment' in that specification.	过时	添加 `querySelector()` and `querySelectorAll()` 方法。
DOM (文档对象模型) 3 级核心规范 The definition of 'DocumentFragment' in that specification.	过时	无变化自 DOM (文档对象模型) 级别 2 核心规范
DOM (文档对象模型) 级别 2 核心规范 The definition of 'DocumentFragment' in that specification.	过时	无变化自 DOM (文档对象模型) 1 级规范
DOM (文档对象模型) 1 级规范 The definition of 'DocumentFragment' in that specification.	过时	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`DocumentFragment`	Chrome 1	Edge 12	Firefox 1	IE 9	Opera 8	Safari 3	WebView Android 1	Chrome Android 18	Firefox Android 4	Opera Android 10.1	Safari iOS 1	Samsung Internet Android 1.0
`DocumentFragment()` 构造函数	Chrome 28	Edge ≤18	Firefox 24	IE No	Opera 15	Safari 8	WebView Android Yes	Chrome Android Yes	Firefox Android 24	Opera Android Yes	Safari iOS 8	Samsung Internet Android Yes
`ParentNode` 方法	Chrome No	Edge No	Firefox No	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android No	Opera Android No	Safari iOS No	Samsung Internet Android No
`ParentNode` properties	Chrome 28	Edge 79	Firefox 25	IE No	Opera 15	Safari No	WebView Android Yes	Chrome Android Yes	Firefox Android 25	Opera Android 14	Safari iOS No	Samsung Internet Android Yes
`querySelector`	Chrome 1	Edge 12	Firefox 3.5	IE 9	Opera 10	Safari 3.2	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android 10.1	Safari iOS 3.2	Samsung Internet Android Yes
`querySelectorAll`	Chrome 1	Edge 12	Firefox 3.5	IE 9	Opera 10	Safari 3.2	WebView Android Yes	Chrome Android Yes	Firefox Android 4	Opera Android 10.1	Safari iOS 3.2	Samsung Internet Android Yes

图例

完整支持
不支持
实验。期望将来行为有所改变。

另请参阅

DOM 接口索引。

元数据

最后修改： Jan 13, 2020

在此页