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

Es wird als eine leichtgewichtige Version vonDocument 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 neuesDocumentFragment-Objekt zurück.

Instanzeigenschaften

Dieses Interface hat keine spezifischen Eigenschaften, erbt jedoch die des ElternteilsNode.

DocumentFragment.childElementCountSchreibgeschützt

Gibt die Anzahl der Kind-Elemente zurück, die dasDocumentFragment hat.

DocumentFragment.childrenSchreibgeschützt

Gibt eine Live-HTMLCollection zurück, die alle Objekte vom TypElement enthält, die Kinder desDocumentFragment-Objekts sind.

DocumentFragment.firstElementChildSchreibgeschützt

Gibt dasElement zurück, das das erste Kind desDocumentFragment-Objekts ist, odernull, wenn es keines gibt.

DocumentFragment.lastElementChildSchreibgeschützt

Gibt dasElement zurück, das das letzte Kind desDocumentFragment-Objekts ist, odernull, wenn es keines gibt.

Instanzmethoden

Dieses Interface erbt die Methoden seines ElternteilsNode.

DocumentFragment.append()

Fügt eine Menge vonNode-Objekten oder Zeichenketten nach dem letzten Kind des DocumentFragments ein.

DocumentFragment.prepend()

Fügt eine Menge vonNode-Objekten oder Zeichenketten vor dem ersten Kind des DocumentFragments ein.

DocumentFragment.querySelector()

Gibt den erstenElement-Knoten innerhalb desDocumentFragment in Dokumentreihenfolge zurück, der die angegebenen Selektoren erfüllt.

DocumentFragment.querySelectorAll()

Gibt eineNodeList allerElement-Knoten innerhalb desDocumentFragment zurück, die die angegebenen Selektoren erfüllen.

DocumentFragment.moveBefore()

Verschiebt einen gegebenenNode innerhalb des aufrufendenDocumentFragment als direktes Kind vor einem gegebenen Referenzknoten, ohne den Knoten zu entfernen und dann einzufügen.

DocumentFragment.replaceChildren()

Ersetzt die vorhandenen Kinder einesDocumentFragment durch eine angegebene neue Menge von Kindern.

DocumentFragment.getElementById()

Gibt den erstenElement-Knoten innerhalb desDocumentFragment in Dokumentreihenfolge zurück, der die angegebene ID erfüllt. Funktional äquivalent zuDocument.getElementById().

Anwendungshinweise

Eine häufige Verwendung fürDocumentFragment besteht darin, eines zu erstellen, einen DOM-Teilbaum darin zusammenzustellen und das Fragment dann mithilfe der Methoden desNode-Interfaces wieappendChild(),append() oderinsertBefore() dem DOM hinzuzufügen oder darin einzufügen. Dadurch werden die Knoten des Fragments in das DOM verschoben, wobei ein leeresDocumentFragment zurückbleibt.

Dieses Interface ist auch bei Webkomponenten sehr nützlich:<template>-Elemente enthalten einDocumentFragment in ihrerHTMLTemplateElement.content-Eigenschaft.

Ein leeresDocumentFragment kann mit der Methodedocument.createDocumentFragment() oder dem Konstruktor erstellt werden.

Leistung

Der Leistungsnutzen vonDocumentFragment wird oft überschätzt. Tatsächlich ist die Verwendung einesDocumentFragment in einigen Engines langsamer als das Hinzufügen zum Dokument in einer Schleife, wie indiesem 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

<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

Browser-Kompatibilität