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.
<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="https://developer.mozilla.org/es/docs/Web/API/EventTarget" 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="https://developer.mozilla.org/es/docs/Web/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="https://developer.mozilla.org/es/docs/Web/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;}
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 tipoElement
que son elementos secundarios del objetoDocumentFragment
. ParentNode.firstElementChild
Read only- Devuelve el
Element
que es el primer hijo del objetoDocumentFragment
, onull
si no hay ninguno. ParentNode.lastElementChild
Read only- Devuelve el
Element
que es el 煤ltimo hijo del objetoDocumentFragment
, onull
si no hay ninguno. ParentNode.childElementCount
Read only- Devuelve un
unsigned long
que indica cantidad de elementos secundarios que tiene el objetoDocumentFragment
.
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 deDocumentFragment
, en el orden del documento, que coincide con los selectores especificados. DocumentFragment.querySelectorAll()
- Devuelve un
NodeList
de todos los nodosElement
dentro deDocumentFragment
que coincide con los selectores especificados. DocumentFragment.getElementById()
- Devuelve el primer nodo
Element
dentro deDocumentFragment
, en el orden del documento, que coincide con el ID especificado. funcionalmente equivale aDocument.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
BCD tables only load in the browser