DocumentFragment

DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version of 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.

构造函数

DocumentFragment()
Creates and returns a new DocumentFragment 对象。

特性

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

ParentNode.children 只读
Returns a live HTMLCollection containing all objects of type Element that are children of the DocumentFragment 对象。
ParentNode.firstElementChild 只读
返回 Element that is the first child of the DocumentFragment object, or null if there is none.
ParentNode.lastElementChild 只读
返回 Element that is the last child of the DocumentFragment object, or null if there is none.
ParentNode.childElementCount 只读
Returns an unsigned long giving the amount of children that the DocumentFragment has.

方法

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

DocumentFragment.querySelector()
Returns the first Element node within the DocumentFragment , in document order, that matches the specified selectors.
DocumentFragment.querySelectorAll()
返回 NodeList of all the Element nodes within the DocumentFragment that match the specified selectors.
DocumentFragment.getElementById()
Returns the first Element node within the DocumentFragment , in document order, that matches the specified ID. Functionally equivalent to Document.getElementById() .

Usage notes

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 Node 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 特性。

An empty DocumentFragment can be created using the 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)
					

结果

规范

规范 状态 Comment
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.
Obsolete 添加 querySelector() and querySelectorAll() 方法。
Document Object Model (DOM) Level 3 Core Specification
The definition of 'DocumentFragment' in that specification.
Obsolete No change from Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Core Specification
The definition of 'DocumentFragment' in that specification.
Obsolete No change from Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 Specification
The definition of 'DocumentFragment' in that specification.
Obsolete 初始定义

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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 methods
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

图例

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

另请参阅