MutationObserver

Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

MutationObserver biedt ontwikkelaars een manier om te reageren op veranderingen in een DOM. Het is ontworpen als een vervaning voor Mutation Events, gedefinieerd in de  DOM3 Events specificatie.

Constructor

MutationObserver()

Constructor om nieuwe DOM mutation observer instances mee aan te maken.

new MutationObserver(
  function callback
);
Parameters
callback
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 MutationRecord is - en de MutationObserver instantie zelf.

Instantiemethodes

void observe( Node target, MutationObserverInit options );
void disconnect();
Array takeRecords();

Nota bene: Node target moet niet verward worden met NodeJS.

observe()

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

void observe(
  Node target,
  MutationObserverInit options
);
Parameters
target
De Node die wordt geobserveerd voor DOM mutaties.
options
Een MutationObserverInit object specificeert welke DOM mutaties gerapporteerd zouden moeten worden.
Nota bene: 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.

disconnect()

Zorgt ervoor dat de  MutationObserver instantie geen notificaties van DOM mutaties ontvangt. Totdat observe() weer is aangeroepen, wordt de callback van de observer niet aangeroepen.

void disconnect();

takeRecords()

Leegt de record queue van de MutationObserver instantie en returnt wat daarin zat vóór het legen.

Array takeRecords();
Return value

Returnt een Array van MutationRecords.

MutationObserverInit

MutationObserverInit is een object waarin de volgende properties gespecificeerd kunnen worden:

Nota bene: als absoluut minimum moet of childList, of attributes, of characterData true zijn. Anders wordt er een error teruggegeven met de melding: "An invalid or illegal string was specified".
Property Description
childList true als toevoegingen en verwijdering van kinderen van de target node (inclusief text nodes) geobserveerd moeten worden.
attributes true als mutaties van de attributen van de target node geobserveerd moeten worden.
characterData true als mutaties van de data van de target node geobserveerd moeten worden.
subtree true als mutaties van niet alleen de target node, maar ook de kinderen van de target node geobserveerd moeten worden.
attributeOldValue true als attributes op true is gezet en de attribuutwaarde van de target node voordat de mutatie plaatsvond opgeslagen moet worden.
characterDataOldValue true als characterData op true is gezet en de data van de target node voordat de mutatie plaatsvond opgeslagen moet worden.
attributeFilter Is een array van lokale attribuutnamen (zonder namespace) als niet alle attribuutmutaties geobserveerd hoeven te worden.

Voorbeeldgebruik

Het volgende voorbeeld is overgenomen van deze blogpost.

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

Aanvullend leesmateriaal

Specificaties

Specificatie Status Commentaar
DOM
The definition of 'MutationObserver' in that specification.
Living Standard  
DOM4
The definition of 'MutationObserver' in that specification.
Working Draft  

Browser compatibiliteit

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basisondersteuning 18 -webkit
26
14 (14) 11 15 6.0 -webkit
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basisondersteuning ? 18 -webkit
26
14.0 (14) 11 (8.1) 15 6 -webkit
7

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: joristt
 Laatst bijgewerkt door: joristt,