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 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() 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 Eigenschaft.

Ein leeres DocumentFragment kann jederzeit erzeugt werden über document.createDocumentFragment() oder über den constructor.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/de/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/de/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/de/docs/Web/API/DocumentFragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="346" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">DocumentFragment</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

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 Read only

Stellt eine aktuelle HTMLCollection bereit mit allen Element Objekten, die dem DocumentFragment angehören.

ParentNode.firstElementChild Read only

Stellt das Element bereit, welches aktuell das erste Kind des DocumentFragment ist. null falls es keines gibt.

ParentNode.lastElementChild Read only

Stellt das Element bereit, welches aktuell das letzte Kind des DocumentFragment ist. null falls es keines gibt.

ParentNode.childElementCount Read only

Stellt als unsigned long die Anzahl der Kindelemente des DocumentFragment bereit.

Constructor

DocumentFragment()

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()

Liefert das erste zutreffende Element innerhalb des Baums des DocumentFragment.

DocumentFragment.findAll()

Liefert eine NodeList mit allen zutreffenden Element innerhalb des Baums des DocumentFragment.

DocumentFragment.querySelector()

Liefert den Element Knoten im DocumentFragment, der in der Reihenfolge im document als erstes zu dem Selektor passt.

DocumentFragment.querySelectorAll()

Liefert eine NodeList 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

Browserkompatibilität

See also

• The DOM interfaces index.