La interfazDocumentFragment representa un objeto de documento mínimo que no tiene padre. Se utiliza como una versión ligera deDocument 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 enreflow) ni inciden en el rendimiento cuando se realizan cambios.

Constructor

DocumentFragment()

Crea y devuelve un nuevo objetoDocumentFragment.

Propiedades

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

ParentNode.childrenRead onlyExperimental

Devuelve unHTMLCollection que contiene los objetos de tipoElement que son elementos secundarios del objetoDocumentFragment.

ParentNode.firstElementChildRead onlyExperimental

Devuelve elElement que es el primer hijo del objetoDocumentFragment, onull si no hay ninguno.

ParentNode.lastElementChildRead onlyExperimental

Devuelve elElement que es el último hijo del objetoDocumentFragment, onull si no hay ninguno.

ParentNode.childElementCountRead onlyExperimental

Devuelve ununsigned 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 interfazParentNode.

DocumentFragment.querySelector()

Devuelve el primer nodoElement dentro deDocumentFragment, en el orden del documento, que coincide con los selectores especificados.

DocumentFragment.querySelectorAll()

Devuelve unNodeList de todos los nodosElement dentro deDocumentFragment que coincide con los selectores especificados.

DocumentFragment.getElementById()

Devuelve el primer nodoElement dentro deDocumentFragment, en el orden del documento, que coincide con elID especificado. funcionalmente equivale aDocument.getElementById().

Notas de uso

A common use forDocumentFragment is to create one, assemble a DOM subtree within it, then append or insert the fragment into the DOM usingNode interface methods such asappendChild() orinsertBefore(). Doing this moves the fragment's nodes into the DOM, leaving behind an emptyDocumentFragment. 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 aDocumentFragment in theirHTMLTemplateElement.content property.

An emptyDocumentFragment can be created using thedocument.createDocumentFragment() method or the constructor.

Example

HTML

<ul></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

Especificaciones

Compatibilidad con navegadores

See also

• The DOM interfaces index.