【JS】MutationObserverの使い方を解説。DOMの変更を検知する！

この記事では、Web APIのひとつ「MutationObserver」について説明したい。

MutationObserverはHTML要素の構造や属性に変化があった際にそれを検知するための仕組み。Web APIのひとつとして定義されており、JavaScriptを使って使用することができる。

コンポーネントの外からHTML要素に変更を加えたいといったユースケースではよく使用される。

なお、モダンなウェブブラウザのほとんどがMutationObserverに対応している。

MDN web docs
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

MutationObserverの基本構文

まずはMutationObserverの基本的な構文と使用の流れを確認しよう。

// コンストラクタを使って新しいインスタンスを生成
const observer　= new MutationObserver(callback);

// コールバック関数を記述
function callback(mutations: MutationRecord[], observer: MutationObserver) {
  console.log();
}

// 監視対象のHTML要素を取得
const targetElement = document.getElementById('element-id') as HTMLElement;

// observeで監視を開始する
observer.observe(targetElement, { attributes: true });

// disconnectで監視を終了する
observer.disconnect();

1. コンストラクタを使って新しいインスタンスを生成する。
2. コールバック関数を記述する。
   ➡ mutationsを引数として使用できる。mutationsはMutationRecordの配列。
3. MutationObserverで監視するHTML要素を取得する。
4. observe関数で監視を開始する。
   ➡ この際に必ずオプションを指定する。
5. disconnect関数で監視を終了する。
   ➡ マシンへの負荷を軽減するために必ず監視を終了する。

MutationRecordの種類

次にMutationRecordの種類について見ていこう。

observe関数を呼び出す際にオプションを指定するといったが、ここでは取得するMutationRecordの種類を指定する。

これらのオプションのうち「childList」「attributes」「characterData」の少なくともひとつを選択しなければならない。選択しなかった場合はエラーとなる。