【JavaScript】MutationObserverでDOMを監視する

ボタンクリックなどユーザが自発的にするイベント以外で、「ある要素がある状態になった時」にイベントを発生させたい時、その「ある要素」を監視する必要があります。そんな時にMutationObserverを使うことで解決します。

サンプル

See the Pen MutationObserver Test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

リンクをクリックするとアラートが出てboxの色が変わりますが、このアラートはクリック時に発生しているわけではなく、boxの属性を監視し、変化があった時にアラートを出すようにしています。

コード

// 対象ノード
const target = document.getElementById('box');

// オブザーバーインスタンス準備
const observer = new MutationObserver((mutations) => {
  alert('属性変わったよ');
});

// オブザーバーの監視対象の設定
const config = {
  attributes: true //対象ノードの属性の監視を有効にする
};

//対象と設定を渡す
observer.observe(target , config);

今回は単純に属性が変わったらアラートを出すだけの処理でしたが、属性が変わった時にその属性を評価することで「ある要素がある状態になった時」を判定することができます。

参考：　https://developer.mozilla.org/ja/docs/Web/API/MutationObserver