MutationObserver

MutationObserver とは、指定したコールバック関数を DOM の変更時に実行させる API です。この API は、DOM3 Events の仕様で定義されていた Mutation Events を新しく設計し直したものです。

コンストラクタ

MutationObserver()

DOM の変更を検知するオブザーバを生成します。

MutationObserver(
  function callback
);

引数

callback

DOM の変更時に呼び出される関数です。この関数は第 1 引数に MutationRecord の配列を、第 2 引数に MutationObserver インスタンス自身を受け取ります。

インスタンスメソッド

observe()

DOM の変更を検知したいノードを指定し、MutationObserver インスタンスを紐づけます。

void observe(
  Node target,
  MutationObserverInit options
);

引数

target

DOM の変更を検知したい Node

options

取得したい変更の種類を指定する MutationObserverInit オブジェクト

disconnect()

MutationObserver インスタンスを対象ノードから解除します。同じインスタンスで observe() メソッドを再度呼び出すまで、オブザーバのコールバック関数は実行されません。

void disconnect();

takeRecords()

コールバック関数へ渡される MutationRecord のキューを空にし、キューに入っていた値を返します。

Array takeRecords();

戻り値

MutationRecord の配列。

MutationObserverInit

MutationObserverInit は以下のプロパティを指定できるオブジェクトです。

使用例

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

// 対象とするノードを取得
const target = document.getElementById('some-id');
 
// オブザーバインスタンスを作成
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.type);
  });    
});
 
// オブザーバの設定
const config = { attributes: true, childList: true, characterData: true };
 
// 対象ノードとオブザーバの設定を渡す
observer.observe(target, config);
 
// 後ほど、監視を中止
observer.disconnect();

関連情報

• 簡単な概要
• より詳細な議論
• Chromium の開発者 Rafael Weinstein 氏によるスクリーンキャスト
• ライブラリ "mutation-summary"

仕様

ブラウザ実装状況