---
title: DocumentFragment
slug: Web/API/DocumentFragment
tags:
  - API
  - DOM
  - DocumentFragment
  - Documents
  - Interface
  - Reference
  - Web Components
translation_of: Web/API/DocumentFragment
---
<div>{{ APIRef("DOM") }}</div>

<p>Das <strong><code>DocumentFragment</code></strong> 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 {{domxref("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 {{Glossary("reflow")}} oder Performanceeinbußen verhindert werden können.</p>

<p>Üblicherweise wird das <code>DocumentFragment</code> 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 {{domxref("Node")}} interface mittels Methoden wie {{domxref("Node.appendChild", "appendChild()")}} und {{domxref("Node.insertBefore", "insertBefore()")}} hinzuzufügen. Wenn das Frament schließlich in die aktive Dokumentstruktur und deren DOM eingefügt wird, bleibt ein leeres <code>DocumentFragment </code>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.</p>

<p>Das interface wird ebenso bei Web components verwendet: {{HTMLElement("template")}}-Elemente beinhalten ein <code>DocumentFragment</code> in ihrer {{domxref("HTMLTemplateElement.content")}} Eigenschaft.</p>

<p>Ein leeres <code>DocumentFragment</code> kann jederzeit erzeugt werden über {{domxref("document.createDocumentFragment()")}} oder über den constructor.</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="Specification" name="Specification">Eigenschaften</h2>

<p><em>Das interface hat keine spezifischen Eigenschaften, erhält jedoch über Vererbung die des übergeordneten </em><em>{{domxref("Node")}} und implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.</em></p>

<dl>
 <dt>{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}</dt>
 <dd>Stellt eine aktuelle {{domxref("HTMLCollection")}} bereit mit allen {{domxref("Element")}} Objekten, die dem <code>DocumentFragment</code> angehören.</dd>
 <dt>{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
 <dd>Stellt das {{domxref("Element")}} bereit, welches aktuell das erste Kind des <code>DocumentFragment</code> ist. <code>null</code> falls es keines gibt.</dd>
 <dt>{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}</dt>
 <dd>Stellt das {{domxref("Element")}} bereit, welches aktuell das letzte Kind des <code>DocumentFragment</code> ist. <code>null</code> falls es keines gibt.</dd>
 <dt>{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}</dt>
 <dd>Stellt als <code>unsigned long</code> die Anzahl der Kindelemente des <code>DocumentFragment </code>bereit.</dd>
</dl>

<h2 id="Constructor">Constructor</h2>

<dl>
 <dt>{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}</dt>
 <dd>Erzeugt ein neues, leeres <code>DocumentFragment</code> Objekt.</dd>
</dl>

<h2 id="Methoden">Methoden</h2>

<p><em>Das interface erbt die Methoden von {{domxref("Node")}}<em>, u</em>nd implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.</em></p>

<dl>
 <dt>{{domxref("DocumentFragment.find()")}} {{experimental_inline}}</dt>
 <dd>Liefert das erste zutreffende {{domxref("Element")}} innerhalb des Baums des <code>DocumentFragment</code>.</dd>
 <dt>{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}</dt>
 <dd>Liefert eine {{domxref("NodeList")}} mit allen zutreffenden {{domxref("Element")}} innerhalb des Baums des <code>DocumentFragment</code>.</dd>
 <dt>{{domxref("DocumentFragment.querySelector()")}}</dt>
 <dd>Liefert den {{domxref("Element")}} Knoten im <code>DocumentFragment</code>, der in der Reihenfolge im document als erstes zu dem Selektor passt.</dd>
 <dt>{{domxref("DocumentFragment.querySelectorAll()")}}</dt>
 <dd>Liefert eine {{domxref("NodeList")}} mit allen {{domxref("Element")}} Knoden im <code>DocumentFragment</code>, die zu dem angegebenen Selektor passen.</dd>
</dl>

<dl>
 <dt>{{domxref("DocumentFragment.getElementById()")}}</dt>
 <dd>Liefert den ersten {{domxref("Element")}} Knoten im <code style="font-size: 14px;">DocumentFragment</code>, dem in der document Reihenfolge zuerst die angegebene ID zugeordnet ist.</dd>
</dl>

<h2 id="Specifications" name="Specifications">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Anmerkungen</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Added the constructor and the implementation of {{domxref("ParentNode")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}</td>
   <td>{{Spec2('Selectors API Level 2')}}</td>
   <td>Added the <code>find()</code> and <code>findAll()</code> methods.</td>
  </tr>
  <tr>
   <td>{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}</td>
   <td>{{Spec2('Selectors API Level 1')}}</td>
   <td>Added the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
   <td>{{Spec2('DOM3 Core')}}</td>
   <td>No change from {{SpecName('DOM2 Core')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
   <td>{{Spec2('DOM2 Core')}}</td>
   <td>No change from {{SpecName('DOM1')}}</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
   <td>8.0</td>
   <td>10.0</td>
   <td>3.2 (525.3)</td>
  </tr>
  <tr>
   <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
   <td>28.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("24.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>15.0</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>ParentNode</code> properties {{experimental_inline}}</td>
   <td>28.0</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop("25.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>15.0</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>ParentNode</code> methods {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>querySelector()</code> and <code>querySelectorAll()</code></td>
   <td>2.1</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>8.0</td>
   <td>10.0</td>
   <td>3.2 (525.3)</td>
  </tr>
  <tr>
   <td><code>findAll()</code> and <code>find() </code>{{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>DocumentFragment()</code> constructor {{experimental_inline}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("24.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>ParentNode</code> properties {{experimental_inline}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile("25.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>5.0</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>ParentNode</code> methods {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index.</a></li>
</ul>