DocumentFragment

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 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 besteht, ähnlich wie ein Standarddokument. Der entscheidende Unterschied besteht darin, dass das DocumentFragment nicht Teil der aktiven Dokumentbaumstruktur ist. Änderungen am Fragment beeinflussen das Dokument nicht.

Konstruktor

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

Instanzeigenschaften

Dieses Interface hat keine spezifischen Eigenschaften, erbt jedoch die des 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 es keines gibt.
DocumentFragment.lastElementChild Schreibgeschützt: Gibt das Element zurück, das das letzte Kind des DocumentFragment-Objekts ist, oder null, wenn es keines gibt.

Instanzmethoden

Dieses Interface erbt die Methoden seines Elternteils Node.

DocumentFragment.append(): Fügt eine Menge von Node-Objekten oder Zeichenketten nach dem letzten Kind des DocumentFragments ein.
DocumentFragment.prepend(): Fügt eine Menge von Node-Objekten oder Zeichenketten vor dem ersten Kind des DocumentFragments ein.
DocumentFragment.querySelector(): Gibt den ersten Element-Knoten innerhalb des DocumentFragment in Dokumentreihenfolge zurück, der die angegebenen Selektoren erfüllt.
DocumentFragment.querySelectorAll(): Gibt eine NodeList aller Element-Knoten innerhalb des DocumentFragment zurück, die die angegebenen Selektoren erfüllen.
DocumentFragment.moveBefore(): Verschiebt einen gegebenen Node innerhalb des aufrufenden DocumentFragment als direktes Kind vor einem gegebenen Referenzknoten, ohne den Knoten zu entfernen und dann einzufügen.
DocumentFragment.replaceChildren(): Ersetzt die vorhandenen 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 die angegebene ID erfüllt. Funktional äquivalent zu Document.getElementById().

Anwendungshinweise

Eine häufige Verwendung für DocumentFragment besteht darin, eines zu erstellen, einen DOM-Teilbaum darin zusammenzustellen und das Fragment dann mithilfe der Methoden des Node-Interfaces wie appendChild(), append() oder insertBefore() dem DOM hinzuzufügen oder darin einzufügen. Dadurch werden die Knoten des Fragments in das DOM verschoben, wobei 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 mit der Methode document.createDocumentFragment() oder dem 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 Hinzufügen zum Dokument in einer Schleife, wie in diesem Benchmark demonstriert. Der Unterschied zwischen diesen Beispielen ist jedoch so marginal, dass es besser ist, für Lesbarkeit als für 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

Browser-Kompatibilität

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden