Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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.
Konstruktor
MutationObserver()-
Erstellt und gibt einen neuen
MutationObserverzurü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 sofernobserve()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
MutationObserverund gibt sie in einem neuenArrayvonMutationRecord-Objekten zurück.
Beispiel
Das folgende Beispiel wurde aus diesem Blogbeitrag 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
| Spezifikation |
|---|
| DOM> # interface-mutationobserver> |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.