MutationObserver

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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

In diesem Artikel

Konstruktor

MutationObserver()

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

Instanzmethoden

disconnect()

Stoppt die MutationObserver-Instanz davon, weitere Benachrichtigungen zu erhalten, bis und sofern observe() erneut aufgerufen wird.

observe()

Konfiguriert den MutationObserver, um Benachrichtigungen über seine Callback-Funktion zu empfangen, wenn Änderungen im DOM auftreten, die den angegebenen Optionen entsprechen.

takeRecords()

Entfernt alle ausstehenden Benachrichtigungen aus der Benachrichtigungswarteschlange des MutationObserver und gibt sie in einem neuen Array von MutationRecord-Objekten zurück.

Beispiel

Das folgende Beispiel wurde aus diesem Blogbeitrag adaptiert.

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

MutationObserver

In diesem Artikel

Konstruktor

Instanzmethoden

Beispiel

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN