MutationObserver: takeRecords() メソッド

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.

MutationObservertakeRecords() メソッドは、検出されたがオブザーバーのコールバック関数で処理されていない DOM の変更に一致するすべてのリストを返し、変更キューは空のままにします。

最も一般的な使用例は、オブザーバーを切断する直前に保留中の変更記録をすべて取得し、オブザーバーを停止する際に保留中の変更を処理できるようにすることです。

構文

js
takeRecords()

引数

なし。

返値

MutationRecord オブジェクトの配列で、そのそれぞれが文書の DOM ツリーの監視された部分に適用された変更を記述します。

メモ: 発生したものの、オブザーバーのコールバックに伝えられなかった変更キューは、 takeRecords()をコールした後は空のままになります。

この例では、オブザーバーを切断する直前に takeRecords()を呼び出して、未伝達のMutationRecordを処理する方法を示します。

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

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

/* 後で、監視を停止する時点になったら... */

/* 未処理のままのすべての変更を処理する */

let mutations = observer.takeRecords();

observer.disconnect();

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

このコードは、処理されていない変更の記録を取得し、その記録を処理できるようにコールバックを呼び出します。これは、disconnect() を呼び出して DOM の観測を停止する直前に行われます。

仕様書

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

ブラウザーの互換性

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