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.

Das DocumentFragment-Interface repräsentiert ein minimales Dokumentobjekt, das über kein übergeordnetes Element verfügt.

Es wird als leichtgewichtige Version eines Document verwendet, das ein Segment einer Dokumentstruktur enthält, das aus Knoten besteht, ähnlich wie ein Standarddokument. Der Hauptunterschied 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.

Instanzeigenschaften

Dieses Interface hat keine spezifischen Eigenschaften, erbt aber die des übergeordneten Node.

DocumentFragment.childElementCount Schreibgeschützt: Gibt die Anzahl der Kind-Elemente des DocumentFragment zurück.
DocumentFragment.children Schreibgeschützt: Gibt eine aktuelle 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.

Instanzmethoden

Dieses Interface erbt die Methoden des übergeordneten Node.

DocumentFragment.append(): Fügt eine Reihe von Node-Objekten oder Zeichenfolgen nach dem letzten Kind des Dokumentfragments ein.
DocumentFragment.prepend(): Fügt eine Reihe von Node-Objekten oder Zeichenfolgen vor dem ersten Kind des Dokumentfragments ein.
DocumentFragment.querySelector(): Gibt den ersten Element-Knoten innerhalb des DocumentFragment zurück, in Dokumentreihenfolge, der den angegebenen Selektoren entspricht.
DocumentFragment.querySelectorAll(): Gibt eine NodeList aller Element-Knoten innerhalb des DocumentFragment zurück, die den angegebenen Selektoren entsprechen.
DocumentFragment.replaceChildren(): Ersetzt die bestehenden Kinder eines DocumentFragment durch eine neue angegebene Menge von Kindern.
DocumentFragment.getElementById(): Gibt den ersten Element-Knoten innerhalb des DocumentFragment zurück, in Dokumentreihenfolge, der der angegebenen ID entspricht. Funktional äquivalent zu Document.getElementById().

Verwendungshinweise

Eine häufige Verwendung für DocumentFragment besteht darin, eines zu erstellen, einen DOM-Teilbaum darin zusammenzustellen und dann das Fragment mit Methoden der Node-Schnittstelle wie appendChild(), append() oder insertBefore() in den DOM einzufügen. Dadurch werden die Knoten des Fragments in den DOM verschoben, und es bleibt ein leeres DocumentFragment übrig.

Dieses Interface ist auch bei Web-Komponenten 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 bei einigen Engines die Verwendung eines DocumentFragment langsamer als das Anhängen an das Dokument in einer Schleife, wie in diesem Benchmark demonstriert wird. Der Unterschied zwischen diesen Beispielen ist jedoch so gering, dass es besser ist, auf Lesbarkeit als auf 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 Standard # interface-documentfragment

Browser-Kompatibilität

BCD tables only load in the browser