Mutation Observerを使ってDOMを監視してみる

Mutation Observerを使ってDOMを監視してみる

2019.11.28 | Develop

前回の「スクロールイベントの代わりにIntersection Observerを使ってみよう」に続き、Observer APIの第二弾です。

DOMが変更されたとき何か処理を実行する場合、setIntervalやrequestAnimationFrameを使用して監視するか、クリックなどイベント自体に処理を追加する必要がありますが、時間で監視すると処理が重くなりますし、イベントで発火させようとするとajaxなど外部からの変更に対する処理を考えた場合、複雑化する場合があります。

そこで、DOMの変化を監視できるMutation Observer APIを使用して処理を行う方法を考えてみます。

Mutation Observerの使い方

基本的な使い方は下記になります。

const target = document.querySelector(‘#target’);
const observer = new MutationObserver((mutations)=>{
mutations.forEach((mutation)=>{
// 処理を記述
});
});
const options = {
attributes: true
};
observer.observe(target, options);

observeメソッドの第二引数のオプションで監視方法を指定します。

  • attributes : 対象ノードの属性の変更を監視するか(boolean)
  • childList : 対象ノードの子ノードを監視するか(boolean)
  • characterData : 対象ノードのデータの変更を監視するか(boolean)
  • subtree : 対象ノードとその子孫ノード監視するか(boolean)
  • attributeOldValue : 対象ノードの変更前の属性値を記録するか(boolean)
  • characterDataOldValue : 対象ノードの変更前のデータを記録するか(boolean)
  • attributeFilter : 特定の属性だけ監視対象とする場合の属性名リスト(配列)

attributes, childList, characterDataのいずれかはtrueが必須となります。
attributeOldValueはattributesがtrueの時に有効、characterDataOldValueはcharacterDataがtrueの時に有効となります。

サンプル

See the Pen Mutation Observer by Daisuke Iso (@kojilow) on CodePen.default

欲しいものリストをクリックするとクリックした要素が買うものリストに移動して金額が出るサンプルです。
要素の移動自体はクリックイベントですが、、、Mutation Observerで買うものリスト内を監視して金額を計算してます。

Mutation Observer単体ではそれほど使う機会はなさそうですが、他のイベントと合わせると色々と使い道がありそうです。

磯 大將
Written by
磯 大將
Categories
Written by