MutationObserver: MutationObserver() Konstruktor

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.

Der DOM MutationObserver()-Konstruktor – Teil der MutationObserver Schnittstelle – erstellt und gibt einen neuen Observer zurück, der einen angegebenen Callback aufruft, wenn DOM-Ereignisse auftreten.

Die DOM-Beobachtung beginnt nicht sofort; die observe() Methode muss zuerst aufgerufen werden, um festzulegen, welcher Teil des DOMs beobachtet werden soll und welche Arten von Änderungen beobachtet werden sollen.

Syntax

new MutationObserver(callback)

Parameter

callback

Eine Funktion, die bei jeder qualifizierten DOM-Änderung aufgerufen wird, basierend auf dem beobachteten Knoten oder Unterbaum und den Optionen.

Die callback-Funktion nimmt zwei Parameter als Eingabe:

Ein Array von MutationRecord Objekten, die jede aufgetretene Änderung beschreiben.
Den MutationObserver, der den callback aufgerufen hat. Dies wird am häufigsten verwendet, um den Beobachter mit MutationObserver.disconnect() zu trennen.

Siehe die Beispiele unten für weitere Details.

Rückgabewert

Ein neues MutationObserver Objekt, das konfiguriert ist, den angegebenen callback aufzurufen, wenn DOM-Mutationen auftreten.

Beispiele

Beobachtung von Kind-Elementen

In diesem Beispiel gibt es Schaltflächen, um ein <li>-Element zu einer Liste hinzuzufügen und das erste <li>-Element aus der Liste zu entfernen.

Wir verwenden einen MutationObserver, um über Änderungen an der Liste benachrichtigt zu werden. Im Callback protokollieren wir Hinzufügungen und Entfernungen, und sobald die Liste leer ist, trennen wir den Observer.

Der "Beispiel zurücksetzen"-Button setzt das Beispiel in den ursprünglichen Zustand zurück.

HTML

html

<button id="add">Add child</button>
<button id="remove">Remove child</button>
<button id="reset">Reset example</button>

<ul id="container"></ul>

<pre id="log"></pre>

CSS

css

#container,
#log {
  height: 150px;
  overflow: scroll;
}

#container li {
  background-color: paleturquoise;
  margin: 0.5rem;
}

JavaScript

const add = document.querySelector("#add");
const remove = document.querySelector("#remove");
const reset = document.querySelector("#reset");
const container = document.querySelector("#container");
const log = document.querySelector("#log");

let namePrefix = 0;

add.addEventListener("click", () => {
  const newItem = document.createElement("li");
  newItem.textContent = `item ${namePrefix}`;
  container.appendChild(newItem);
  namePrefix++;
});

remove.addEventListener("click", () => {
  const itemToRemove = document.querySelector("li");
  if (itemToRemove) {
    itemToRemove.parentNode.removeChild(itemToRemove);
  }
});

reset.addEventListener("click", () => {
  document.location.reload();
});

function logChanges(records, observer) {
  for (const record of records) {
    for (const addedNode of record.addedNodes) {
      log.textContent = `Added: ${addedNode.textContent}\n${log.textContent}`;
    }
    for (const removedNode of record.removedNodes) {
      log.textContent = `Removed: ${removedNode.textContent}\n${log.textContent}`;
    }
    if (record.target.childNodes.length === 0) {
      log.textContent = `Disconnected\n${log.textContent}`;
      observer.disconnect();
    }
    console.log(record.target.childNodes.length);
  }
}

const observerOptions = {
  childList: true,
  subtree: true,
};

const observer = new MutationObserver(logChanges);
observer.observe(container, observerOptions);

Ergebnis

Versuchen Sie, auf "Kind hinzufügen" zu klicken, um Listenelemente hinzuzufügen, und auf "Kind entfernen", um sie zu entfernen. Der Observer-Callback protokolliert Hinzufügungen und Entfernungen. Sobald die Liste leer ist, protokolliert der Observer eine "Disconnected"-Nachricht und trennt den Observer.

Der "Beispiel zurücksetzen"-Button lädt das Beispiel neu, damit Sie es erneut versuchen können.

Spezifikationen

Specification
DOM Standard # ref-for-dom-mutationobserver-mutationobserver①

Browser-Kompatibilität

BCD tables only load in the browser