MutationObserver.takeRecords()
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 |
---|
DOM Standard # ref-for-dom-mutationobserver-takerecords① |
ブラウザ互換性
BCD tables only load in the browser