Änderungen am DOM-Tree

Kaum eine moderne Website, die nicht dynamisch mit Hilfe von JavaScript Inhalte oder Komponenten erzeugt, sprich dynamisch den DOM-Tree verändert. Doch wie lassen sich programmatisch Änderungen am DOM-Tree abfangen beziehungsweise wie lässt sich auf solche Änderungen reagieren? Die Antwort hierauf liefert die sogenannte Mutation Observer API.

Die Mutation Observer API ist Teil des HTML5-Standards und definiert verschiedene Klassen beziehungsweise Typen, um auf Änderungen am DOM-Tree zu reagieren. Zentraler Einstiegspunkt in die API ist die Klasse MutationObserver, die für das Beobachten von Änderungen an Knoten im DOM-Tree verantwortlich ist. Dem Konstruktor dieser Klasse übergibt man eine Callback-Funktion, die aufgerufen wird, wenn der zugrundeliegende DOM-Knoten verändert wird. Das Beobachten wiederum startet man gesondert über einen Aufruf der Methode observe(), welcher man den entsprechenden DOM-Knoten übergibt sowie ein Konfigurationsobjekt, über das sich verschiedene Einstellungen vornehmen lassen:

const callback = (mutations) => {

  // ...

}

const observer = new MutationObserver(callback);

const options = {};

observer.observe(targetNode, options);