MutationObserver: takeRecords()-Methode

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 Methode takeRecords() des MutationObserver gibt eine Liste aller passenden DOM-Änderungen zurück, die erkannt, aber noch nicht von der Callback-Funktion des Observers verarbeitet wurden, und leert die Mutationswarteschlange.

Der häufigste Anwendungsfall hierfür ist das sofortige Abrufen aller ausstehenden Mutationsaufzeichnungen unmittelbar vor dem Trennen des Observers, sodass ausstehende Mutationen beim Herunterfahren des Observers verarbeitet werden können.

Syntax

js
takeRecords()

Parameter

Keine.

Rückgabewert

Ein Array von MutationRecord-Objekten, von denen jedes eine Änderung beschreibt, die auf den beobachteten Teil des DOM-Baums des Dokuments angewendet wurde.

Hinweis: Die Warteschlange der Mutationen, die aufgetreten sind, aber nicht an die Callback-Funktion des Observers geliefert wurden, wird nach dem Aufruf von takeRecords() geleert.

Beispiele

In diesem Beispiel demonstrieren wir, wie nicht gelieferte MutationRecords behandelt werden, indem takeRecords() unmittelbar vor dem Trennen des Observers aufgerufen wird.

js
const targetNode = document.querySelector("#someElement");
const observerOptions = {
  childList: true,
  attributes: true,
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, observerOptions);

/* later, when it's time to stop observing… */

/* handle any still-pending mutations */

let mutations = observer.takeRecords();

observer.disconnect();

if (mutations.length > 0) {
  callback(mutations);
}

Der Code ruft alle nicht verarbeiteten Mutationsaufzeichnungen ab und ruft dann die Callback-Funktion mit den Aufzeichnungen auf, damit sie verarbeitet werden können. Dies geschieht unmittelbar vor dem Aufruf von disconnect(), um die Beobachtung des DOM zu beenden.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser