MutationObserver
の takeRecords()
メソッドは、検出されたがオブザーバのコールバック関数で処理されていない DOM の変更に一致するすべてのリストを返し、変更キューは空のままにします。 最も一般的な使用例は、オブザーバを切断する直前に保留中の変更記録をすべて取得し、オブザーバを停止する際に保留中の変更を処理できるようにすることです。
構文
const mutationRecords = mutationObserver.takeRecords()
引数
なし
戻り値
MutationRecord
オブジェクトの配列で、そのそれぞれがドキュメントの DOM ツリーの監視された部分に適用された変更を記述します。
注: 発生したものの、オブザーバーのコールバックに伝えられなかった変更キューは、 takeRecords()
をコールした後は空のままになります。
例
この例では、オブザーバを切断する直前に takeRecords()
を呼び出して、未伝達のMutationRecord
を処理する方法を示します。
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) {
callback(mutations);
}
12-17 行目のコードは、処理されていない変更の記録を取得し、その記録を処理できるようにコールバックを呼び出します。これは、disconnect()
を呼び出してDOMの観測を停止する直前に行われます。
仕様
Specification | Status | Comment |
---|---|---|
DOM MutationObserver.takeRecords() の定義 |
現行の標準 |
ブラウザ互換性
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.