javascriptで要素(DOM)の変更を監視する【脱jQuery】
外は連日、猛暑日室内はエアコン効きすぎで凍える今日この頃、
いかがお過ごしでしょうか。
皆さんこんにちわ。
今回は、指定したコールバック関数をDOMの変更時に実行する、
「MutationObserver()」に関して使い方をさらっとやっていきます。
jQueryでは、
$().on('DOMSubtreeModified propertychange',function(){});
こんな感じでしたが、javascriptでは、
MutationObserver()を使います。
子要素の追加や削除を監視する
基本的な形は以下の様になります。
オブザーバインスタンスを作成し、
オブザーバインスタンス内に変更された時の処理を書き、
監視対象とオブザーバの設定を渡して呼び出します。
javascript
- const monitored = document.getElementById('foo'); // 監視対象のノードを取得
- const observer = new MutationObserver( function(mutations) { // オブザーバインスタンスを作成
- mutations.forEach(function(mutation) {
- console.log('change!!!'); // 変更された時の処理
- });
- });
- const config = {childList: true}; // オブザーバの設定
- observer.observe(monitored, config); // 対象ノードとオブザーバの設定を渡す
- // 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