---
title: MutationObserver
slug: Web/API/MutationObserver
tags:
  - API
  - DOM
  - DOM Referentie
  - Geavanceerd
  - NeedsContent
  - NeedsUpdate
  - Referentie
translation_of: Web/API/MutationObserver
---
<p>{{APIRef("DOM")}}</p>

<p><code>MutationObserver</code> biedt ontwikkelaars een manier om te reageren op veranderingen in een <a href="/en-US/docs/DOM">DOM</a>. Het is ontworpen als een vervanging voor <a href="/en-US/docs/DOM/Mutation_events">Mutation Events</a>, gedefinieerd in de  DOM3 Events specificatie.</p>

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

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

<p>Constructor om nieuwe DOM mutation observer instances mee aan te maken.</p>

<pre class="syntaxbox notranslate">new MutationObserver(
  function callback
);
</pre>

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

<dl>
 <dt><code>callback</code></dt>
 <dd>De functie die aangeroepen wordt bij elke DOM mutatie. De observer roept deze functie aan met twee argumenten: een array van objecten - waarvan elk object van het type {{domxref("MutationRecord")}} is - en de MutationObserver instantie zelf.</dd>
</dl>

<h2 id="Instantiemethodes">Instantiemethodes</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>

<div class="note">
<p><strong>Nota bene</strong>: {{domxref("Node")}} target moet niet verward worden met <a href="https://nodejs.org/en/">NodeJS</a>.</p>
</div>

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

<p>Registreert de MutationObserver instance om notifcaties te ontvangen wanneer er DOM mutaties op de gespecificeerde node worden uitgevoerd.</p>

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

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

<dl>
 <dt><code>target</code></dt>
 <dd>De {{domxref("Node")}} die wordt geobserveerd voor DOM mutaties.</dd>
 <dt><code>options</code></dt>
 <dd>Een <a href="#MutationObserverInit"><code>MutationObserverInit</code></a> object specificeert welke DOM mutaties gerapporteerd zouden moeten worden.</dd>
</dl>

<div class="note"><strong>Nota bene</strong>: een observer toevoegen aan een element is net zoals addEventListener: als je het element meerdere keren observeert maakt het geen verschil. Dit betekent dat als je het element twee keer observeert, de observe callback functie niet twee keer wordt aangeroepen en je ook niet twee keer disconnect() hoeft aan te roepen. In andere woorden: zodra een element wordt geobserveerd, doet het opnieuw observeren met dezelfde observer instantie niets. Als het callback object echter anders is, voegt het uiteraard wel een tweede observer toe.</div>

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

<p>Zorgt ervoor dat de  <code>MutationObserver</code> instantie geen notificaties van DOM mutaties ontvangt. Totdat <a href="#observe()"><code>observe()</code></a> weer is aangeroepen, wordt de callback van de observer niet aangeroepen.</p>

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

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

<p>Leegt de record queue van de <code>MutationObserver</code> instantie en returnt wat daarin zat vóór het legen.</p>

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

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

<p>Returnt een Array van {{domxref("MutationRecord")}}s.</p>

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

<p><code>MutationObserverInit</code> is een object waarin de volgende properties gespecificeerd kunnen worden:</p>

<div class="note"><strong>Nota bene</strong>: als absoluut minimum moet of <code>childList</code>, of <code>attributes</code>, of <code>characterData</code> <code>true</code> zijn. Anders wordt er een error teruggegeven met de melding: "An invalid or illegal string was specified".</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><code>true</code> als toevoegingen en verwijdering van kinderen van de target node (inclusief text nodes) geobserveerd moeten worden.</td>
  </tr>
  <tr>
   <td><code>attributes</code></td>
   <td><code>true</code> als mutaties van de attributen van de target node geobserveerd moeten worden.</td>
  </tr>
  <tr>
   <td><code>characterData</code></td>
   <td><code>true</code> als mutaties van de data van de target node geobserveerd moeten worden.</td>
  </tr>
  <tr>
   <td><code>subtree</code></td>
   <td><code>true</code> als mutaties van niet alleen de target node, maar ook de kinderen van de target node geobserveerd moeten worden.</td>
  </tr>
  <tr>
   <td><code>attributeOldValue</code></td>
   <td><code>true</code> als <code>attributes</code> op <code>true</code> is gezet en de attribuutwaarde van de target node voordat de mutatie plaatsvond opgeslagen moet worden.</td>
  </tr>
  <tr>
   <td><code>characterDataOldValue</code></td>
   <td><code>true</code> als <code>characterData</code> op <code>true</code> is gezet en de data van de target node voordat de mutatie plaatsvond opgeslagen moet worden.</td>
  </tr>
  <tr>
   <td><code>attributeFilter</code></td>
   <td>Is een array van lokale attribuutnamen (zonder namespace) als niet alle attribuutmutaties geobserveerd hoeven te worden.</td>
  </tr>
 </tbody>
</table>

<h2 id="Voorbeeldgebruik">Voorbeeldgebruik</h2>

<p>Het volgende voorbeeld is overgenomen van <a class="external" href="http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="freelink">deze blogpost</a>.</p>

<pre class="brush: js notranslate">// selecteer de target node
var target = document.querySelector('#some-id');

// creëer een observer instantie
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });
});

// configuratie van de observer instantie
var config = { attributes: true, childList: true, characterData: true };

// roep observe() aan op de observer instantie, en stuur de target node en de observer configuratie mee
observer.observe(target, config);

// wanneer je wilt, kun je weer stoppen met observeren
observer.disconnect();
</pre>

<h2 id="Aanvullend_leesmateriaal">Aanvullend leesmateriaal</h2>

<ul>
 <li><a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="freelink">Een kort overzicht</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">Een diepgaandere discussie</a></li>
 <li><a class="external" href="http://www.youtube.com/watch?v=eRZ4pO0gVWw" rel="freelink">Een screencast van Chromium ontwikkelaar Rafael Weinstein</a></li>
 <li><a class="external" href="http://code.google.com/p/mutation-summary/" rel="freelink">De mutatie samenvatting bibliotheek</a></li>
</ul>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specificatie</th>
   <th scope="col">Status</th>
   <th scope="col">Commentaar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}}</td>
   <td>{{ Spec2('DOM WHATWG') }}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('DOM4', '#mutationobserver', 'MutationObserver')}}</td>
   <td>{{ Spec2('DOM4') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibiliteit">Browser compatibiliteit</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>Basisondersteuning</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 Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basisondersteuning</td>
   <td>{{CompatUnknown}}</td>
   <td>18 {{property_prefix("-webkit")}}<br>
    26</td>
   <td>{{CompatGeckoMobile(14)}}</td>
   <td>11 (8.1)</td>
   <td>15</td>
   <td>6 {{property_prefix("-webkit")}}<br>
    7</td>
  </tr>
 </tbody>
</table>
</div>