MutationObserver

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

MutationObserver インターフェイスは、DOM ツリーへ変更が加えられたことを監視することができる機能を提供します。これは DOM3 Events の仕様で定義されていたMutation Events 機能の置き換えとして設計されたものです。

コンストラクター

MutationObserver(): DOM の変更が行われたときに指定されたコールバック関数を呼び出す新しいMutationObserver を生成して返します。

メソッド

disconnect(): MutationObserver のインスタンスが今後の通知を受け取ることを、observe() が再び呼び出されるまで停止します。
observe(): 指定したオプションに合う DOM の変更が発生したときに、コールバック関数を介して通知を受信し始めるようにMutationObserver を構成します。
takeRecords(): MutationObserver の通知キューから保留中の通知をすべて削除し、MutationRecord の新しい配列 (Array) で返します。

Mutation Observer と resize イベントリスナーのカスタマイズとデモ

https://codepen.io/milofultz/pen/LYjPXPw

例

以下の例はこのブログ記事を参考にしたものです。

// 変更を監視するノードを選択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();