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
(en-US) interfaces zusätzlich.
ParentNode.children
(en-US) Schreibgeschützt- Stellt eine aktuelle
HTMLCollection
bereit mit allenElement
Objekten, die demDocumentFragment
angehören. ParentNode.firstElementChild
(en-US) Schreibgeschützt- Stellt das
Element
bereit, welches aktuell das erste Kind desDocumentFragment
ist.null
falls es keines gibt. ParentNode.lastElementChild
(en-US) Schreibgeschützt- Stellt das
Element
bereit, welches aktuell das letzte Kind desDocumentFragment
ist.null
falls es keines gibt. ParentNode.childElementCount
(en-US) Schreibgeschützt- Stellt als
unsigned long
die Anzahl der Kindelemente desDocumentFragment
bereit.
Constructor
DocumentFragment()
(en-US)- Erzeugt ein neues, leeres
DocumentFragment
Objekt.
Methoden
Das interface erbt die Methoden von Node
, und implementiert darüber hinaus jene des ParentNode
(en-US) interfaces zusätzlich.
DocumentFragment.find()
- Liefert das erste zutreffende
Element
innerhalb des Baums desDocumentFragment
. DocumentFragment.findAll()
- Liefert eine
NodeList
(en-US) mit allen zutreffendenElement
innerhalb des Baums desDocumentFragment
. DocumentFragment.querySelector()
(en-US)- Liefert den
Element
Knoten imDocumentFragment
, der in der Reihenfolge im document als erstes zu dem Selektor passt. DocumentFragment.querySelectorAll()
(en-US)- Liefert eine
NodeList
(en-US) mit allenElement
Knoden imDocumentFragment
, die zu dem angegebenen Selektor passen.
DocumentFragment.getElementById()
- Liefert den ersten
Element
Knoten imDocumentFragment
, 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 (en-US). |
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
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 |