DocumentFragment

Das DocumentFragment interface stellt ein einfaches Objekt dar, welches ohne Bezug zu einem parent erstellt und verwendet werden kann. Es kann somit verstanden werden als eine leichtgewichtige Variante des Document, die einen Ausschnitt einer Dokumentstruktur aus Element-Knoten abbildet. Der zentrale Unterschied dabei ist jedoch, dass das Fragment nicht Bestandteil der aktiven Seitenstruktur und des DOM-Baums ist. Dadurch haben Änderungen an dem Fragment keine Auswirkungen auf das aktive Dokument, wodurch unerwünschte Seiteneffekte von DOM-Änderungen wie reflow oder Performanceeinbußen verhindert werden können.

Üblicherweise wird das DocumentFragment dazu verwendet, um einen neuen DOM-Teilbaum für eine Seite zu erzeugen und darin beliebig Fragmente und Knoten vorbereiten zu können, diese über das Node interface mittels Methoden wie appendChild() und insertBefore() hinzuzufügen. Wenn das Frament schließlich in die aktive Dokumentstruktur und deren DOM eingefügt wird, bleibt ein leeres DocumentFragment zurück. Da alle Knoten auf einmal in das aktive Dokument hinzugefügt werden, wird lediglich ein einzelner reflow und render Prozess ausgelöst, anstelle von potentiell unzähligen für jeden einzelnen, separat eingefügten Knoten.

Das interface wird ebenso bei Web components verwendet: <template>-Elemente beinhalten ein DocumentFragment in ihrer HTMLTemplateElement.content Eigenschaft.

Ein leeres DocumentFragment kann jederzeit erzeugt werden über document.createDocumentFragment() oder über den constructor.

Eigenschaften

Das interface hat keine spezifischen Eigenschaften, erhält jedoch über Vererbung die des übergeordneten Node und implementiert darüber hinaus jene des ParentNode interfaces zusätzlich.

ParentNode.children Read only
Stellt eine aktuelle HTMLCollection bereit mit allen Element Objekten, die dem DocumentFragment angehören.
ParentNode.firstElementChild Read only
Stellt das Element bereit, welches aktuell das erste Kind des DocumentFragment ist. null falls es keines gibt.
ParentNode.lastElementChild Read only
Stellt das Element bereit, welches aktuell das letzte Kind des DocumentFragment ist. null falls es keines gibt.
ParentNode.childElementCount Read only
Stellt als unsigned long die Anzahl der Kindelemente des DocumentFragment bereit.

Constructor

DocumentFragment()
Erzeugt ein neues, leeres DocumentFragment Objekt.

Methoden

Das interface erbt die Methoden von Node, und implementiert darüber hinaus jene des ParentNode interfaces zusätzlich.

DocumentFragment.find()
Liefert das erste zutreffende Element innerhalb des Baums des DocumentFragment.
DocumentFragment.findAll()
Liefert eine NodeList mit allen zutreffenden Element innerhalb des Baums des DocumentFragment.
DocumentFragment.querySelector()
Liefert den Element Knoten im DocumentFragment, der in der Reihenfolge im document als erstes zu dem Selektor passt.
DocumentFragment.querySelectorAll()
Liefert eine NodeList mit allen Element Knoden im DocumentFragment, die zu dem angegebenen Selektor passen.
DocumentFragment.getElementById()
Liefert den ersten Element Knoten im DocumentFragment, dem in der document Reihenfolge zuerst die angegebene ID zugeordnet ist.

Spezifikationen

Spezifikation Status Anmerkungen
DOM
Die Definition von 'DocumentFragment' in dieser Spezifikation.		 Lebender Standard Added the constructor and the implementation of ParentNode.
Selectors API Level 2
Die Definition von 'DocumentFragment' in dieser Spezifikation.		 Veraltet Added the find() and findAll() methods.
Selectors API Level 1
Die Definition von 'DocumentFragment' in dieser Spezifikation.		 Veraltet Added the querySelector() and querySelectorAll() methods.
Document Object Model (DOM) Level 3 Core Specification
Die Definition von 'DocumentFragment' in dieser Spezifikation.		 Veraltet No change from Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Core Specification
Die Definition von 'DocumentFragment' in dieser Spezifikation.		 Veraltet No change from Document Object Model (DOM) Level 1 Specification
Document Object Model (DOM) Level 1 Specification
Die Definition von 'DocumentFragment' in dieser Spezifikation.		 Veraltet Initial definition

Browserkompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Ja) 1.0 (1.7 oder früher) (Ja) (Ja) (Ja)
querySelector() and querySelectorAll() 1.0 (Ja) 3.5 (1.9.1) 8.0 10.0 3.2 (525.3)
findAll() and find() Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
DocumentFragment() constructor 28.0 (Ja) 24.0 (24.0) Nicht unterstützt 15.0 Nicht unterstützt
ParentNode properties 28.0 Nicht unterstützt 25.0 (25.0) Nicht unterstützt 15.0 Nicht unterstützt
ParentNode methods Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Ja) (Ja) 1.0 (1.0) (Ja) (Ja) (Ja)
querySelector() and querySelectorAll() 2.1 (Ja) 1.0 (1.0) 8.0 10.0 3.2 (525.3)
findAll() and find() Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt
DocumentFragment() constructor ? (Ja) 24.0 (24.0) Nicht unterstützt ? ?
ParentNode properties (Ja) Nicht unterstützt 25.0 (25.0) Nicht unterstützt 5.0 Nicht unterstützt
ParentNode methods Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt

See also