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();