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.

* Some parts of this feature may have varying levels of support.

Das DocumentFragment-Interface repräsentiert ein minimales Dokumentobjekt, das keinen Elternknoten hat.

Es wird als eine leichtgewichtige Version von Document verwendet, die ein Segment einer Dokumentstruktur speichert, das aus Knoten wie ein Standarddokument besteht. Der wesentliche Unterschied besteht darin, dass das Dokumentfragment nicht Teil der aktiven Dokumentbaumstruktur ist. Änderungen am Fragment wirken sich nicht auf das Dokument aus.

Konstruktor

DocumentFragment(): Erstellt und gibt ein neues DocumentFragment-Objekt zurück.

Instanz-Eigenschaften

Dieses Interface hat keine spezifischen Eigenschaften, erbt jedoch die seines Elternteils, Node.

DocumentFragment.childElementCount Schreibgeschützt: Gibt die Anzahl der Kind-Elemente zurück, die das DocumentFragment hat.
DocumentFragment.children Schreibgeschützt: Gibt eine Live-HTMLCollection zurück, die alle Objekte vom Typ Element enthält, die Kinder des DocumentFragment-Objekts sind.
DocumentFragment.firstElementChild Schreibgeschützt: Gibt das Element zurück, das das erste Kind des DocumentFragment-Objekts ist, oder null, wenn keines vorhanden ist.
DocumentFragment.lastElementChild Schreibgeschützt: Gibt das Element zurück, das das letzte Kind des DocumentFragment-Objekts ist, oder null, wenn keines vorhanden ist.

Instanz-Methoden

Dieses Interface erbt die Methoden seines Elternteils, Node.

DocumentFragment.append(): Fügt eine Reihe von Node-Objekten oder Zeichenketten nach dem letzten Kind des Dokumentfragments ein.
DocumentFragment.prepend(): Fügt eine Reihe von Node-Objekten oder Zeichenketten vor dem ersten Kind des Dokumentfragments ein.
DocumentFragment.querySelector(): Gibt den ersten Element-Knoten innerhalb des DocumentFragment in Dokumentreihenfolge zurück, der den angegebenen Selektoren entspricht.
DocumentFragment.querySelectorAll(): Gibt eine NodeList aller Element-Knoten innerhalb des DocumentFragment zurück, die den angegebenen Selektoren entsprechen.
DocumentFragment.moveBefore() Experimentell: Verschiebt einen gegebenen Node als direktes Kind innerhalb des aufrufenden DocumentFragment vor einem angegebenen Referenzknoten, ohne den Knoten zu entfernen und dann einzufügen.
DocumentFragment.replaceChildren(): Ersetzt die bestehenden Kinder eines DocumentFragment durch eine angegebene neue Menge von Kindern.
DocumentFragment.getElementById(): Gibt den ersten Element-Knoten innerhalb des DocumentFragment in Dokumentreihenfolge zurück, der der angegebenen ID entspricht. Funktionell gleichwertig mit Document.getElementById().

Verwendungshinweise

Ein gängiger Einsatz für DocumentFragment ist es, eines zu erstellen, ein DOM-Teilbaum darin zu assemblieren und dann das Fragment in das DOM einzufügen oder anzuhängen, indem Methoden des Node-Interfaces wie appendChild(), append() oder insertBefore() verwendet werden. Dabei werden die Knoten des Fragments in das DOM verschoben, sodass ein leeres DocumentFragment zurückbleibt.

Dieses Interface ist auch bei Webkomponenten sehr nützlich: <template>-Elemente enthalten ein DocumentFragment in ihrer HTMLTemplateElement.content-Eigenschaft.

Ein leeres DocumentFragment kann durch die Methode document.createDocumentFragment() oder den Konstruktor erstellt werden.

Leistung

Der Leistungsnutzen von DocumentFragment wird oft überschätzt. Tatsächlich ist die Verwendung eines DocumentFragment in einigen Engines langsamer als das Anhängen an das Dokument in einer Schleife, wie in diesem Benchmark gezeigt. Der Unterschied zwischen diesen Beispielen ist jedoch so marginal, dass es besser ist, die Lesbarkeit gegenüber der Leistung zu optimieren.

Beispiel

HTML

html

<ul></ul>

JavaScript

const ul = document.querySelector("ul");
const fruits = ["Apple", "Orange", "Banana", "Melon"];

const fragment = new DocumentFragment();

for (const fruit of fruits) {
  const li = document.createElement("li");
  li.textContent = fruit;
  fragment.append(li);
}

ul.append(fragment);

Ergebnis

Spezifikationen

Specification
DOM # interface-documentfragment