javascriptで要素(DOM)の変更を監視する【脱jQuery】

外は連日、猛暑日室内はエアコン効きすぎで凍える今日この頃、
いかがお過ごしでしょうか。
皆さんこんにちわ。
今回は、指定したコールバック関数をDOMの変更時に実行する、
「MutationObserver()」に関して使い方をさらっとやっていきます。

jQueryでは、
$().on(‘DOMSubtreeModified propertychange’,function(){});
こんな感じでしたが、javascriptでは、
MutationObserver()を使います。

子要素の追加や削除を監視する

基本的な形は以下の様になります。
オブザーバインスタンスを作成し、
オブザーバインスタンス内に変更された時の処理を書き、
監視対象とオブザーバの設定を渡して呼び出します。

javascript

  1. const monitored = document.getElementById('foo'); // 監視対象のノードを取得
  2. const observer = new MutationObserver( function(mutations) { // オブザーバインスタンスを作成
  3. mutations.forEach(function(mutation) {
  4. console.log('change!!!'); // 変更された時の処理
  5. });
  6. });
  7. const config = {childList: true}; // オブザーバの設定
  8. observer.observe(monitored, config); // 対象ノードとオブザーバの設定を渡す
  9. // observer.disconnect(); // 監視を中止する

上記の様にconfigに「childList:true」を指定すると
監視対象が持つ子要素に変更があった場合に処理が走ります。

MutationObserver()で指定できるプロパティ

MutationObserver()で指定できるプロパティには次の7つがあります。

プロパティ一覧

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

childList, attributes, characterDataのうちどれか一つは必須。

参考:MutationObserver – Web API インターフェイス | MDN