JavaScript/DOM/DocumentFragment

Die DocumentFragment Schnittstelle ist ein minimales Dokument-Objekt, das ähnlich wie das document-Objekt eine Baumstruktur mit Knoten besitzt. Anders als dieses betreffen Änderungen an der Struktur aber nicht das Document, da es (noch) nicht in das DOM eingehängt ist.

Anwendungsbereich für ein DocumentFragment ist zum Beispiel das Erzeugen mehrerer dynamischer Elemente, die dann zusammen als DocumentFragment mit appendChild in den Elementbaum eingehängt werden.

Ein DocumentFragment kann zum einen über document.createDocumentFragment erstellt werden, zum anderen wird ein HTML5 template-Element ebenfalls als DocumentFragment abgebildet. Das DocumentFragment aus einem Template muss allerdings mittels document.importNode ins DOM importiert werden, bevor es mit appendChild an der gewünschten Stelle eingesetzt werden kann.

Die Methode erwartet keine Parameter. Das erzeugte DocumentFragment ist zunächst leer und kann mit Elementen gefüllt werden. Da es noch nicht Teil des DOM ist, führt das Hinzufügen von Elementen nicht sofort zu einem Neuzeichnen (Reflow) der Browser-Darstellung. Erst wenn das DocumentFragment in das Haupt-DOM eingefügt wird, übernimmt der Browser die Änderungen in einem einzigen Schritt, was die Performance verbessert.

Beachten Sie, dass die Nodes in einem DocumentFragment verschoben werden, wenn es mit appendChild() im DOM eingesetzt wird. Das DocumentFragment ist nach dem appendChild-Aufruf leer. Wenn Sie im einzufügenden DOM-Teilbaum Events registrieren wollen, müssen Sie das vorher tun.

Eigenschaften

• childElementCount
• children
• firstElementChild
• lastElementChild

Methoden

• append()
• getElementById()
• prepend()
• querySelector()
• querySelectorAll()
• replaceChildren()

Siehe auch

• template-Element
• JavaScript/DOM/ParentNode

Weblinks

• MDN: DocumentFragment
• MDN: importNode Methode
• MDN: <template> Element