MutationObserver

MutationObserver は DOM 内の変更に対応する方法を開発者に提供します。これは DOM3 Events 仕様書で定義された Mutation Events を置き換えるものとして設計されたものです。

コンストラクタ

MutationObserver()

新しい DOM 変更オブザーバのインスタンスを作成するためのコンストラクタ。

MutationObserver(
  function callback
);

引数

callback

DOM に変更が行われるたびに呼び出される関数。オブザーバはこの関数を 2 つの引数付きで呼び出します。1 番目はオブジェクトの配列で、それぞれ MutationRecord の形式を取ります。2 番目はこの MutationObserver インスタンスです。

インスタンスメソッド

observe()

MutationObserver インスタンスを登録し、指定したノード上の DOM の変更通知を受け取ります。

void observe(
  Node target,
  optional MutationObserverInit options
);

引数

target

DOM の変更を監視する Node。

options

DOM の変更を報告する MutationObserverInit オブジェクト。

disconnect()

MutationObserver インスタンスが DOM の変更通知を受け取るのを中止します。observe() メソッドが再度使われるまで、オブザーバのコールバック関数は呼び出されなくなります。

void disconnect();

takeRecords()

MutationObserver インスタンスの記録キューを空にして、そこに記録されていた内容を返します。

Array takeRecords();

戻り値

MutationRecord の配列。

MutationObserverInit

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

MutationRecord

MutationRecord はオブザーバのコールバック関数に渡されるオブジェクトです。これは以下のプロパティを持ちます。

使い方の例

以下の例は このブログ記事 から引用したものです。

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

関連情報

• 簡単な概要
• より踏み込んだ議論
• Chromium の開発者 Rafael Weinstein 氏によるスクリーンキャスト
• 変更要約ライブラリ
• MutationObserver インタフェースを定義している DOM4 仕様書

ブラウザ実装状況