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
# ref-for-dom-mutationobserver-takerecords①

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
takeRecords

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support