MutationObserver

MutationObserverは、DOMの変更を検知できるブラウザ標準のAPIです。

MutationObserver インターフェイスは、 DOM ツリーへ変更が加えられたことを監視することができる機能を提供します。
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

かなり昔から使えるようなのですが（2015年くらいには整っていそう）、自分は活用したことがなく
今回便利だな～という出来事があったので、紹介します。

いつ使ったか

Shopifyを使っているサイトで、アプリ（プラグイン的なやつ）によって商品のおすすめ機能が実装されていました。
その内容をいじりたかったのですが、アプリによって動的に追加される商品要素が
どのタイミングでDOMに追加されるかが分からず困っていました。

力ずくでやるとしたら、スクロールイベントやIntersectionObserverを使って
その要素が画面にあるかを確認し続ける……という方法などが考えられます。
まあそれっぽい感じの実装にはなりますが、適切とは言い難いですね。

コード

// 非表示にしたい商品のハンドルを指定
const targetHandle = "handle-hoge";

// 監視対象の要素を指定
const targetNode = document.querySelector('#hoge-wrapper');

// 監視対象の子要素追加を監視
const callback = (mutationsList, observer) => {
  mutationsList.forEach(mutation => {
    if (mutation.type === 'childList') {
      // 非表示にしたいハンドルを含んだ商品は削除
      $.each($("#hoge-wrapper a"), function() {
        const href = $(this).attr('href');
        if(href.includes(targetHandle)) {
          $(this).closest('.hoge-product').remove();
        }
      });
    }
  });
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, {
  childList: true, //子要素の追加/削除を監視
  subtree: true, //子孫要素も監視対象にする
});

やった内容

動的に追加される要素は、#hoge-wrapperというdivに囲まれていたので、
それを監視対象にしています。

MutationObserverのオプションで、subtree: trueとすると
直下の子要素だけでなく、子孫要素全体を監視対象に含められます。

これにより、指定のdivに要素が追加されたら、任意の処理をする
という想定通りの挙動を実装できました。

便利!!

補足

監視対象の要素に動的な要素を追加した場合、
それを検知してまた要素が追加され
さらにまたそれが検知され……
と、無限ループに陥る可能性があるので注意が必要です。

処理の内容に気をつけるのはもちろんながら、
監視を一時的に停止できる disconnect() メソッドも役に立ちそうです。

その他にも、変更を検知したら対象のDOMツリーを返してくれるなど
かなりありがたみの強い機能があるので、見てみると結構面白いです!

今回は監視対象に childList を指定し、監視対象の子要素に対して使いましたが
attributes を指定すると属性値の変更を検知できます。
クラスやdata属性を動的に切り替えるライブラリなどもたくさんあるので、
それに対してなにかしたいときに役立つかもしれません。

おわりに

今まで使ってなかった理由でもあるのですが、自前で機能を実装している場合は
なにか処理が終わったら……とかレスポンスが返ってきたら……など
最も適切な実行タイミングを自分で指定できるんですよね。

今回のように、第三者が書いたコードであったり、サービスに元々付いている機能だったり
直接処理を追加できない場合は、DOMを頼りにする手法がマッチするかと思います!

ここぞというときに使いましょ!!

ではでは～

参考

MutationObserver - Web API | MDN
MutationObserver: observe() メソッド - Web API | MDN
MutationObserver: disconnect() メソッド - Web API | MDN
MutationRecord - Web API | MDN
MutationObserver について理解を深める