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.

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