DOMの変化を監視してくれるMutation Observer

Java ScriptのObserver(監視者)にはいくつか種類がありますが、Mutation ObserverはDOMの変更を監視してくれます。

単純にDOMが生成された、削除された、だけでなく属性値の変化も感知してくれるので、個人的にはWAI ARIAのstate変化を監視してもらうのに重宝してます。

Mutation Observerのオプション

Mutation Observerでは下記のオプションを設定できます。初期値は全部false。当然ながら全てfalseのままだとエラーがでて動きません。

設定名内容
childList子要素の増減を監視
attributes属性の変更を監視
attributeFilter特定の属性だけ監視したいときに設定
attributeOldValue属性が変更される前の値を取得する
characterData テキストノードの内容変更を監視
characterDataOldValueテキストノードの内容が変更される前の内容を取得する
subtree監視対象をサブツリー全体に拡大する

Mutation Observerの基本使用例

  const observer = new MutationObserver(callback);
  observer.observe(target, config); 

callback は処理内容。targetは監視対象。configは先ほどのオプションです。

なので下のような書き方が読みやすくて良いかと。

const callback =()=>{
  // 処理
};

const config ={
  subtree: true
};

const target = xxxxx ;

const observer = new MutationObserver(callback);
observer.observe(target, config); 

戻り値は配列

observerの戻り値はオプションに基づいた記録(Mutation Recordオブジェクト)の配列で返されます。

ですのでcallbackでMutationRecordを利用するにはループ処理を行なう必要があります。

下は非常に簡単に作ったサンプルです。aria-hiddenを監視しtabindexを切り替えています。

See the Pen Mutation Observer by Takashi Abe (@TakeshiAbe) on CodePen.

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(軽微なカスタムなら5,500円〜)

ご依頼・ご相談は「お問い合わせ・ご相談」より随時承ります。