DocumentFragment

This translation is incomplete. Please help translate this article from English

La interfaz DocumentFragment representa un objeto de documento mínimo que no tiene padre. Se utiliza como una versión ligera de Document que almacena un segmento de una estructura de documento compuesta de nodos como un documento estándar. La gran diferencia se debe al hecho de que el fragmento de documento no forma parte de la estructura de árbol del documento activo. Los cambios realizados en el fragmento no afectan el documento  (incluso en reflow)  ni inciden en el rendimiento cuando se realizan cambios. 

Constructor

DocumentFragment()
Crea y devuelve un nuevo objeto DocumentFragment.

Propiedades

Esta interfaz no tiene propiedades específicas, pero hereda las de su padre, Node, e implementa los de la interfaz ParentNode.

ParentNode.children Read only
Devuelve un HTMLCollection que contiene los objetos de tipo Element que son elementos secundarios del objeto DocumentFragment.
ParentNode.firstElementChild Read only
Devuelve el Element que es el primer hijo del objeto DocumentFragment, o null si no hay ninguno.
ParentNode.lastElementChild Read only
Devuelve el Element que es el último hijo del objeto DocumentFragment, o null si no hay ninguno.
ParentNode.childElementCount Read only
Devuelve un unsigned long que indica cantidad de elementos secundarios que tiene el objeto DocumentFragment.

Métodos

Esta interfaz hereda los métodos de su padre, Node, e implementa los de la interfaz ParentNode.

DocumentFragment.querySelector()
Devuelve el primer nodo Element dentro de DocumentFragment, en el orden del documento, que coincide con los selectores especificados.
DocumentFragment.querySelectorAll()
Devuelve un NodeList de todos los nodos Element dentro de DocumentFragment que coincide con los selectores especificados.
DocumentFragment.getElementById()
Devuelve el primer nodoElement dentro de DocumentFragment, en el orden del documento, que coincide con el ID especificado. funcionalmente equivale a Document.getElementById().

Notas de uso

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 = new DocumentFragment()

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

list.appendChild(fragment)

Result

Specifications

Specification Status Comment
DOM
La definición de 'DocumentFragment' en esta especificación.		 Living Standard Added the constructor and the implementation of ParentNode.
Selectors API Level 1
La definición de 'DocumentFragment' en esta especificación.		 Obsolete Added the querySelector() and querySelectorAll() methods.
Document Object Model (DOM) Level 3 Core Specification
La definición de 'DocumentFragment' en esta especificación.		 Obsolete No change from Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Core Specification
La definición de 'DocumentFragment' en esta especificación.		 Obsolete No change from Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 Specification
La definición de 'DocumentFragment' en esta especificación.		 Obsolete Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
DocumentFragmentChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 9Opera Soporte completo 8Safari Soporte completo 3WebView Android Soporte completo 1Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 1Samsung Internet Android Soporte completo 1.0
DocumentFragment() constructor
Experimental
Chrome Soporte completo 28Edge Soporte completo ≤18Firefox Soporte completo 24IE Sin soporte NoOpera Soporte completo 15Safari Soporte completo 8WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo 24Opera Android Soporte completo SiSafari iOS Soporte completo 8Samsung Internet Android Soporte completo Si
ParentNode methods
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Sin soporte NoOpera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No
ParentNode properties
Experimental
Chrome Soporte completo 28Edge Soporte completo 79Firefox Soporte completo 25IE Sin soporte NoOpera Soporte completo 15Safari Sin soporte NoWebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo 25Opera Android Soporte completo 14Safari iOS Sin soporte NoSamsung Internet Android Soporte completo Si
querySelectorChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 3.5IE Soporte completo 9Opera Soporte completo 10Safari Soporte completo 3.2WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 3.2Samsung Internet Android Soporte completo Si
querySelectorAllChrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 3.5IE Soporte completo 9Opera Soporte completo 10Safari Soporte completo 3.2WebView Android Soporte completo SiChrome Android Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 3.2Samsung Internet Android Soporte completo Si

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.

See also