MutationObserver

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

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.

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:

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

• Een kort overzicht
• Een diepgaandere discussie
• Een screencast van Chromium ontwikkelaar Rafael Weinstein
• De mutatie samenvatting bibliotheek

Specificaties

Browser compatibiliteit