DocumentFragment

Estás leyendo la versión en inglés del artículo porque aún no existe una traducción para este idioma. ¡Ayúdanos a traducir este artículo!

The 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 that because the document fragment isn't part of the active document tree structure, changes made to the fragment don't affect the document, cause reflow, or incur any performance impact that can occur when changes are made.

Constructor

DocumentFragment()
Creates and returns a new DocumentFragment object.

Properties

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

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

Methods

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()
Returns a 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 property.

An empty DocumentFragment can be created using the document.createDocumentFragment() method or the constructor.

Example

HTML

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

JavaScript

var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']

var fragment = document.createDocumentFragment()

fruits.forEach(function (fruit) {
  var li = document.createElement('li')
  li.innerHTML = fruit
  fragment.appendChild(li)
})

list.appendChild(fragment)

Result

Specifications

Specification Status Comment
DOM
The definition of 'DocumentFragment' in that specification.
Living Standard Added the constructor and the implementation of ParentNode.
Selectors API Level 1
The definition of 'DocumentFragment' in that specification.
Obsolete Added the querySelector() and querySelectorAll() methods.
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 Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DocumentFragmentChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
DocumentFragment() constructor
Experimental
Chrome Full support 28Edge Full support YesFirefox Full support 24IE No support NoOpera Full support 15Safari Full support 8WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 24Opera Android Full support YesSafari iOS Full support 8Samsung Internet Android Full support Yes
ParentNode methods
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
ParentNode properties
Experimental
Chrome Full support 28Edge No support NoFirefox Full support 25IE No support NoOpera Full support 15Safari No support NoWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 25Opera Android Full support 14Safari iOS No support NoSamsung Internet Android Full support Yes
querySelectorChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10Safari Full support 3.2WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support Yes
querySelectorAllChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 8Opera Full support 10Safari Full support 3.2WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.2Samsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also