DocumentFragment

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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. EventTarget Node DocumentFragment

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 Experimental

Devuelve un HTMLCollection que contiene los objetos de tipo Element que son elementos secundarios del objeto DocumentFragment.

ParentNode.firstElementChild Read only Experimental

Devuelve el Element que es el primer hijo del objeto DocumentFragment, o null si no hay ninguno.

ParentNode.lastElementChild Read only Experimental

Devuelve el Element que es el último hijo del objeto DocumentFragment, o null si no hay ninguno.

ParentNode.childElementCount Read only Experimental

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

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

JavaScript

js
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

Specification
DOM
# interface-documentfragment

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DocumentFragment
DocumentFragment() constructor
append
childElementCount
children
firstElementChild
getElementById
lastElementChild
moveBefore
Experimental
prepend
querySelector
querySelectorAll
replaceChildren

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.

See also