DocumentFragment
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
Nur lesbar-
Gibt die Anzahl der Kind-
Elemente
desDocumentFragment
zurück. DocumentFragment.children
Nur lesbar-
Gibt eine aktuelle
HTMLCollection
zurück, die alle Objekte vom TypElement
enthält, die Kinder desDocumentFragment
-Objekts sind. DocumentFragment.firstElementChild
Nur lesbar-
Gibt das
Element
zurück, das das erste Kind desDocumentFragment
-Objekts ist, odernull
, wenn keines vorhanden ist. DocumentFragment.lastElementChild
Nur lesbar-
Gibt das
Element
zurück, das das letzte Kind desDocumentFragment
-Objekts ist, odernull
, 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 desDocumentFragment
zurück, in Dokumentreihenfolge, der den angegebenen Selektoren entspricht. DocumentFragment.querySelectorAll()
-
Gibt eine
NodeList
allerElement
-Knoten innerhalb desDocumentFragment
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 desDocumentFragment
zurück, in Dokumentreihenfolge, der der angegebenen ID entspricht. Funktional äquivalent zuDocument.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
<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