Quelle: Bold
Die Mutation Observer API 08.11.2021, 16:19 Uhr

Änderungen am DOM-Tree

Über die Mutation Observer API kann man auf Änderungen am DOM-Tree reagieren.
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:

web & mobile DEVELOPER

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt web&mobile Developer plus Kunde.
  • 2 Monate Gratis testen
  • Über 4.000 qualifizierte Fachartikel
  • Diverse DevBooks thematisch für Sie zusammen gestellt
  • Webcasts von 30 - 90 Min.
  • Aufzeichnungen von ausgewählten Fortbildungen und Konferenzen
  • Auf jedem Gerät verfügbar