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 (en-US) 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() (en-US) 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 (en-US) 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 (en-US) Schreibgeschützt Experimental: Stellt eine aktuelle HTMLCollection bereit mit allen Element Objekten, die dem DocumentFragment angehören.
ParentNode.firstElementChild (en-US) Schreibgeschützt Experimental: Stellt das Element bereit, welches aktuell das erste Kind des DocumentFragment ist. null falls es keines gibt.
ParentNode.lastElementChild (en-US) Schreibgeschützt Experimental: Stellt das Element bereit, welches aktuell das letzte Kind des DocumentFragment ist. null falls es keines gibt.
ParentNode.childElementCount (en-US) Schreibgeschützt Experimental: Stellt als unsigned long die Anzahl der Kindelemente des DocumentFragment bereit.

Constructor

DocumentFragment() (en-US) Experimental: 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() Experimental: Liefert das erste zutreffende Element innerhalb des Baums des DocumentFragment.
DocumentFragment.findAll() Experimental: Liefert eine NodeList (en-US) mit allen zutreffenden Element innerhalb des Baums des DocumentFragment.
DocumentFragment.querySelector() (en-US): Liefert den Element Knoten im DocumentFragment, der in der Reihenfolge im document als erstes zu dem Selektor passt.
DocumentFragment.querySelectorAll() (en-US): Liefert eine NodeList (en-US) 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! (en-US)

Desktop
Mobile

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()` Experimental	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`DocumentFragment()` constructor Experimental	28.0	(Ja)	24.0 (24.0)	Nicht unterstützt	15.0	Nicht unterstützt
`ParentNode` properties Experimental	28.0	Nicht unterstützt	25.0 (25.0)	Nicht unterstützt	15.0	Nicht unterstützt
`ParentNode` methods Experimental	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()` Experimental	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt
`DocumentFragment()` constructor Experimental	?	(Ja)	24.0 (24.0)	Nicht unterstützt	?	?
`ParentNode` properties Experimental	(Ja)	Nicht unterstützt	25.0 (25.0)	Nicht unterstützt	5.0	Nicht unterstützt
`ParentNode` methods Experimental	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt	Nicht unterstützt