MutationObserver

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die MutationObserver Schnittstelle bietet die Möglichkeit, Änderungen am DOM-Baum zu beobachten. Sie ist als Ersatz für das ältere Mutation Events-Feature konzipiert, das Teil der DOM3 Events-Spezifikation war.

Konstruktor

MutationObserver(): Erstellt und gibt einen neuen MutationObserver zurück, der eine angegebene Callback-Funktion aufruft, wenn Änderungen am DOM auftreten.

Instanzmethoden

disconnect(): Beendet die Benachrichtigungen des MutationObserver-Instanz, bis und sofern observe() erneut aufgerufen wird.
observe(): Konfiguriert den MutationObserver, um mit der Zustellung von Benachrichtigungen durch seine Callback-Funktion zu beginnen, wenn DOM-Änderungen gemäß den gegebenen Optionen eintreten.
takeRecords(): Entfernt alle ausstehenden Benachrichtigungen aus der Benachrichtigungsliste des MutationObserver und gibt sie in einem neuen Array von MutationRecord-Objekten zurück.

Mutation Observer & Anpassung des Resize-Event-Listeners & Demo

https://codepen.io/milofultz/pen/LYjPXPw

Beispiel

Das folgende Beispiel wurde von diesem Blog-Post adaptiert.

// Select the node that will be observed for mutations
const targetNode = document.getElementById("some-id");

// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

Spezifikationen

Specification
DOM Standard # interface-mutationobserver

Browser-Kompatibilität

BCD tables only load in the browser