# DOM ツリーの変更監視
## MutationObserver
[MutationObserver - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver)
```js
// 変更を監視するノードを選択
const targetNode = document.getElementById("some-id");
// (変更を監視する) オブザーバーのオプション
const config = { attributes: true, childList: true, subtree: true };
// 変更が発見されたときに実行されるコールバック関数
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
console.log("子ノードが追加または削除されました。");
} else if (mutation.type === "attributes") {
console.log(`${mutation.attributeName} 属性が変更されました。`);
}
}
};
// コールバック関数に結びつけられたオブザーバーのインスタンスを生成
const observer = new MutationObserver(callback);
// 対象ノードの設定された変更の監視を開始
observer.observe(targetNode, config);
// その後で、監視を停止することができる
observer.disconnect();
```