SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.
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 oder objektorientiert mit new DocumentFragment() 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.
Ein neu erzeugtes 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 in älteren Browsern die Performance verbessert hat.
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
Siehe auch
- template-Element
- JavaScript/DOM/ParentNode
Weblinks
- MDN: DocumentFragment
- MDN: importNode Methode
- MDN: <template> Element
