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.

MutationObserver の takeRecords() メソッドは、検出されたがオブザーバーのコールバック関数で処理されていない 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 Standard
# ref-for-dom-mutationobserver-takerecords①

ブラウザーの互換性

BCD tables only load in the browser