このインターフェイスは、DOM ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていた Mutation Events 機能の置き換えとして設計されたものです。
// 変更を監視するノードを選択
const targetNode = document.getElementById('some-id');
// (変更を監視する) オブザーバーのオプション
const config = { attributes: true, childList: true, subtree: true };
// 変更が発見されたときに実行されるコールバック関数
const callback = function(mutationsList, observer) {
// Use traditional 'for loops' for IE 11
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
}
else if (mutation.type === 'attributes') {
console.log('The ' + mutation.attributeName + ' attribute was modified.');
}
}
};
// コールバック関数に結びつけられたオブザーバーのインスタンスを生成
const observer = new MutationObserver(callback);
// 対象ノードの設定された変更の監視を開始
observer.observe(targetNode, config);
// その後で、監視を停止することができる
observer.disconnect();
https://codepen.io/webgeeker/full/YjrZgg/
| 表示内容: |
| 表示内容: |