---
title: MutationObserver
slug: Web/API/MutationObserver
tags:
  - Beobachter-Muster
  - DOM-Knoten
  - Fortgeschrittene
  - Observer Pattern
  - Programmierung
  - Wertänderungen verfolgen
  - Änderungen überwachen
translation_of: Web/API/MutationObserver
---
<p>{{APIRef("DOM")}}</p>

<p>Der <code>MutationObserver</code> ermöglicht es, auf Änderungen im <a href="/en-US/docs/DOM">DOM</a>-Element zu reagieren. Er löst die <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a> aus der DOM3 Events Spezifikation ab.</p>

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

<h3 id="MutationObserver" name="MutationObserver()"><code>MutationObserver()</code></h3>

<p>Konstruktor zum Instanziieren neuer DOM-MutationObservers.</p>

<pre class="eval">MutationObserver(
  function callback
);
</pre>

<h6 id="Parameters" name="Parameters">Parameters</h6>

<dl>
 <dt><code>callback</code></dt>
 <dd>Die Funktion wird bei jeder Veränderung am DOM-Element ausgelöst. Der Observer (Beobachter) ruft die Callbackfunktion mit zwei Argumenten auf. Das erste ist ein Array aus <a href="#MutationRecord"><code>MutationRecord</code></a>-Objekten. Das zweite ist diese Instanz des <code>MutationObserver</code>.</dd>
</dl>

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

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>void <a href="#observe()">observe</a>( {{domxref("Node")}} target, <a href="#MutationObserverInit">MutationObserverInit</a> options );</code></td>
  </tr>
  <tr>
   <td><code>void <a href="#disconnect()">disconnect</a>();</code></td>
  </tr>
  <tr>
   <td><code>Array <a href="#takeRecords()">takeRecords</a>();</code></td>
  </tr>
 </tbody>
</table>

<h3 id="observe" name="observe()"><code>observe()</code></h3>

<p>Registriert die Instanz von <code>MutationObserver</code> , um Meldungen über Veränderungen DOM-Elements der angegebenen Node zu erhalten.</p>

<pre class="eval">void observe(
  {{domxref("Node")}} target,
  <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> options
);
</pre>

<h6 id="Parameters" name="Parameters">Parameters</h6>

<dl>
 <dt><code>target</code></dt>
 <dd>Die {{domxref("Node")}} , zu dem Veränderungen im DOM beobachtet werden sollen.</dd>
 <dt><code>options</code></dt>
 <dd>Ein <a href="#MutationObserverInit"><code>MutationObserverInit</code></a>-Objekt, das angibt, welche DOM-Veränderungen gemeldet werden sollen.</dd>
</dl>

<div class="note">Anmerkung: Einen Observer zu einem Element hinzufügen funktioniert genau wie addEventListener - man kann es auch von mehreren Observern gleichzeitig beobachten lassen. Das heißt, wenn man ein Element doppelt beobachtet, feuert es nicht zweimal und man muss auch nicht zweimal disconnect() aufrufen. Mit anderen Worten: wenn man ein Element beobachtet, macht es keinerlei Unterschied, wenn man es durch dasselbe Objekt nochmal beobachten lässt. Wenn es von einem anderen Objekt beobachtet wird, dann wird natürlich zusätzlich ein weiterer Observer angehängt.</div>

<h3 id="disconnect" name="disconnect()"><code>disconnect()</code></h3>

<p>Sorgt dafür, dass die <code>MutationObserver</code>-Instanz die Überwachung der DOM-Benachrichtigungen beendet. Bis die <a href="#observe()"><code>observe()</code></a> -Methode erneut benutzt wird, wird die Callback-Methode des Observers nicht aufgerufen.</p>

<pre class="eval">void disconnect();
</pre>

<h3 id="takeRecords" name="takeRecords()"><code>takeRecords()</code></h3>

<p>Leert die Nachrichten-Kette ("record queue") der <code>MutationObserver</code> Instanz gibt den vorher dort vorhandenen Inhalt zurück.</p>

<pre class="eval">Array takeRecords();
</pre>

<h6 id="Return_value" name="Return_value">Return value</h6>

<p>Gibt ein Array mit <a href="#MutationRecord"><code>MutationRecord</code>s</a> zurück.</p>

<h2 id="MutationObserverInit" name="MutationObserverInit"><code>MutationObserverInit</code></h2>

<p><code>MutationObserverInit</code> ist ein Objekt, das die folgenden Eigenschaften enthalten (und damit festlegen) kann:</p>

<div class="note">Anmerkung: Als Mindestanforderung muss <code>childList</code>, <code>attributes</code>, oder <code>characterData</code> auf <code>true</code> gesetzt werden. Anderenfalls wird ein Fehler "Ungültiger String angegeben" ("An invalid or illegal string was specified") ausgelöst.</div>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Property</td>
   <td class="header">Description</td>
  </tr>
  <tr>
   <td><code>childList</code></td>
   <td>Wenn Kindelemente (child nodes) der Ziel-Node (inklusive Textnodes) beobachtet werden sollen, muss <code>childList </code>auf <code style="font-style: normal;">true</code> gesetzt werden.</td>
  </tr>
  <tr>
   <td><code>attributes</code></td>
   <td>Muss auf <code>true</code> gesetzt werden, wenn Veränderungen an Attributen der Ziel-Node (target node) beobachtet bzw. berichtet werden sollen.</td>
  </tr>
  <tr>
   <td><code>characterData</code></td>
   <td>
    <p>Muss <code>true</code> sein, wenn Veränderungen an den Daten der Ziel-Node beobachtet werden sollen.</p>
   </td>
  </tr>
  <tr>
   <td><code>subtree</code></td>
   <td>Auf <code>true</code> setzen, wenn nicht nur Änderungen an der Ziel-Node (target node) beobachtet werden sollen, sondern auch Veränderungen von dessen Kindelementen (child nodes).</td>
  </tr>
  <tr>
   <td><code>attributeOldValue</code></td>
   <td>Muss auf <code>true</code> gesetzt werden, wenn <code>attributes</code> ebenfalls <code>true</code> ist und der Wert des target-node-Attributs <em>vor</em> der Veränderung ebenfalls gemeldet werden soll.</td>
  </tr>
  <tr>
   <td><code>characterDataOldValue</code></td>
   <td>
    <p>Muss auf <code>true</code> gesetzt werden, wenn <code>characterData</code> ebenfalls <code>true</code> ist und der Wert von data <em>vor</em> der Veränderung ebenfalls gemeldet werden soll.</p>
   </td>
  </tr>
  <tr>
   <td><code>attributeFilter</code></td>
   <td>Mit dieser Eigenschaft kann ein Array mit lokalen Attributnamen angegeben werden (ohne Namespace), wenn nicht alle Attribute beobachtet werden sollen.</td>
  </tr>
 </tbody>
</table>

<h2 id="MutationRecord" name="MutationRecord"><code>MutationRecord</code></h2>

<p>Als erstes Argument wird an die Callback-Funktion des Observers ein Array aus <code>MutationRecord</code>-Objekten übergeben. Ein <code>MutationRecord</code>-Objekt beinhaltet die folgenden Eigenschaften:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td class="header">Property</td>
   <td class="header">Type</td>
   <td class="header">Description</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td><code>String</code></td>
   <td>Gibt <code>attributes</code> zurück, wenn die Veränderung eine Änderung an Attributen der Node gewesen ist, <code>characterData</code> wenn Veränderungen an der <code>CharacterData</code>-Node vorgenommen wurden, und <code>childList</code> wenn es sich um eine Veränderung an den untergeordneten Knoten im Baum handelt.</td>
  </tr>
  <tr>
   <td><code>target</code></td>
   <td><code>{{domxref("Node")}}</code></td>
   <td>Gibt die von der Veränderung betroffene Node zurück, abhängig von <code>type</code>. Bei <code>attributes</code> das Element, von dem Attribute geändert wurden. Bei <code>characterData</code> wird die <code>CharacterData</code>-Node zurückgegeben. Bei <code>childList</code> die Node, deren untergeordnete Kindelemente verändert wurden.</td>
  </tr>
  <tr>
   <td><code>addedNodes</code></td>
   <td><code>{{domxref("NodeList")}}</code></td>
   <td>Gibt die hinzugefügten Nodes zurück. Wenn keine hinzugefügt wurden, wird eine leere <span style="font-family: 'Courier New','Andale Mono',monospace;">NodeList</span> zurückgegeben.</td>
  </tr>
  <tr>
   <td><code>removedNodes</code></td>
   <td><code>{{domxref("NodeList")}}</code></td>
   <td>Gibt die entfernten Nodes zurück. Wenn keine entfernt wurden, wird eine leere <span style="font-family: 'Courier New','Andale Mono',monospace;">NodeList</span> zurückgegeben.</td>
  </tr>
  <tr>
   <td><code>previousSibling</code></td>
   <td><code>{{domxref("Node")}}</code></td>
   <td>Gibt den vorhergehenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst <code>null</code>.</td>
  </tr>
  <tr>
   <td><code>nextSibling</code></td>
   <td><code>{{domxref("Node")}}</code></td>
   <td>Gibt den folgenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst <code>null</code>.</td>
  </tr>
  <tr>
   <td><code>attributeName</code></td>
   <td><code>String</code></td>
   <td>Gibt den lokalen Namen des geänderten Attributs zurück, sonst <code>null</code>.</td>
  </tr>
  <tr>
   <td><code>attributeNamespace</code></td>
   <td><code>String</code></td>
   <td>Gibt den lokalen Namespace des geänderten Attributs zurück, sonst <code>null</code>.</td>
  </tr>
  <tr>
   <td><code>oldValue</code></td>
   <td><code>String</code></td>
   <td>Rückgabewert hängt vom <code>type </code>ab. Bei <code>attributes</code> wird der Wert des Attributs vor der Änderung zurückgegeben. Bei <code>characterData</code>, der Wert von Data vor der Änderung. Bei <code>childList</code> wird <code>null</code> zurückgegeben.</td>
  </tr>
 </tbody>
</table>

<h2 id="Example_usage" name="Example_usage">Nutzungsbeispiel</h2>

<p>Das folgende Beispiel wurde aus <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">diesem Blog-Post</a> übernommen.</p>

<pre class="brush: js">// zu überwachende Zielnode (target) auswählen
var target = document.querySelector('#some-id');

// eine Instanz des Observers erzeugen
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

// Konfiguration des Observers: alles melden - Änderungen an Daten, Kindelementen und Attributen
var config = { attributes: true, childList: true, characterData: true };

// eigentliche Observierung starten und Zielnode und Konfiguration übergeben
observer.observe(target, config);

// später: Observation wieder einstellen
observer.disconnect();
</pre>

<h2 id="Additional_reading" name="Additional_reading">Weiterführende Informationen (engl.)</h2>

<ul>
 <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">A brief overview</a></li>
 <li><a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">A more in-depth discussion</a></li>
 <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">A screencast by Chromium developer Rafael Weinstein</a></li>
 <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">The mutation summary library</a></li>
 <li><a href="http://dom.spec.whatwg.org/#mutation-observers">The DOM standard</a> which defines the <code>MutationObserver</code> interface</li>
</ul>

<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>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>18 {{ property_prefix("WebKit") }}<br>
    26</td>
   <td>{{ CompatGeckoDesktop(14) }}</td>
   <td>11</td>
   <td>15</td>
   <td>6.0 {{ property_prefix("WebKit") }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</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>{{ CompatUnknown() }}</td>
   <td>18 {{ property_prefix("WebKit") }}<br>
    26</td>
   <td>{{ CompatGeckoMobile(14) }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>15</td>
   <td>
    <p>6 {{ property_prefix("WebKit")}}</p>

    <p>7</p>
   </td>
  </tr>
 </tbody>
</table>
</div>