MutationObserver

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

コンストラクタ

MutationObserver()

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

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

インスタンスメソッド

void observe( Node target, MutationObserverInit options );
void disconnect();
Array takeRecords();

補足: 引数 Node target は NodeJS と関係ありません。

observe()

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

void observe(
  Node target,
  MutationObserverInit options
);
引数
target
DOM の変更を検知したい Node
options
取得したい変更の種類を指定する MutationObserverInit オブジェクト

補足: MutationObserver インスタンスと対象ノードを変えずに observe() を 2 回実行しても、コールバックは 1 回だけ呼び出され、また disconnect() を 2 回呼び出す必要もありません(addEventListener と同様)。しかし、別の MutationObserver インスタンスであれば、同じノードに別のオブザーバが追加されます。

disconnect()

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

void disconnect();

takeRecords()

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

Array takeRecords();
戻り値

MutationRecord の配列。

MutationObserverInit

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

プロパティ 意味
childList 対象ノードの子ノード(テキストノードも含む)に対する追加・削除を監視する場合は true にします。
attributes 対象ノードの属性に対する変更を監視する場合は true にします。
characterData 対象ノードのデータに対する変更を監視する場合は true にします。
subtree 対象ノードとその子孫ノードに対する変更を監視する場合は true にします。
attributeOldValue 対象ノードの変更前の属性値を記録する場合は true にします(attributestrue の時に有効)。
characterDataOldValue 対象ノードの変更前のデータを記録する場合は true にします(characterDatatrue の時に有効)。
attributeFilter すべての属性の変更を監視する必要がない場合は、(名前空間を除いた)属性ローカル名の配列を指定します。

使用例

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

// 対象とするノードを取得
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();

関連情報

仕様

仕様書 策定状況 備考
DOM
MutationObserver の定義
現行の標準  

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MutationObserverChrome 完全対応 26
完全対応 26
未対応 18 — 26
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 14IE 完全対応 11Opera 完全対応 15Safari 完全対応 7
完全対応 7
未対応 6 — 7
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
WebView Android 完全対応 あり
完全対応 あり
未対応 ? — ?
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Chrome Android 完全対応 26
完全対応 26
未対応 18 — 26
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Firefox Android 完全対応 14Opera Android 完全対応 14Safari iOS 完全対応 7
完全対応 7
未対応 6 — 7
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
MutationObserver() constructorChrome 完全対応 26
完全対応 26
未対応 18 — 26
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Edge 完全対応 ありFirefox 完全対応 14IE 完全対応 11Opera 完全対応 15Safari 完全対応 7
完全対応 7
未対応 6 — 7
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
WebView Android 完全対応 あり
完全対応 あり
未対応 ? — ?
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Chrome Android 完全対応 26
完全対応 26
未対応 18 — 26
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Firefox Android 完全対応 14Opera Android 完全対応 14Safari iOS 完全対応 7
完全対応 7
未対応 6 — 7
接頭辞付き
接頭辞付き WebKit のベンダー接頭辞が必要
Samsung Internet Android 完全対応 あり
disconnectChrome 完全対応 18Edge 完全対応 12Firefox 完全対応 14IE 完全対応 11Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 14Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 あり
observeChrome 完全対応 18Edge 完全対応 12Firefox 完全対応 14IE 完全対応 11Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 14Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 あり
takeRecordsChrome 完全対応 18Edge 完全対応 12Firefox 完全対応 14IE 完全対応 11Opera 完全対応 15Safari 完全対応 6WebView Android 完全対応 ありChrome Android 完全対応 18Firefox Android 完全対応 14Opera Android 完全対応 14Safari iOS 完全対応 6Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。