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.