MutationObserver便利

Reactの裏側で使われているとは知っていたものの、jQueryが使われていてJavaScriptのコードがあっちこっちで書かれているみたいなレガシーな案件の時に役に立ったのでメモ。

window.addEventListener("load", function() {
  // 要素が変更されたときに実行するコード
  const observer = new MutationObserver(function(mutations) {
    const m = mutations[0];

    // m.target.classList.contains("moge") でクラスが含まれるかチェック
    // m.attributeName に変更したクラスが入っている
  });

  const targets = document.querySelectorAll("ここに監視する要素を書く");

  for (const e of [...targets]) {
    observer.observe(e, {
      attributes: true
    });
  }
});

上記コードだとHTML要素の属性が変更になったときのみ動作するが、子要素の変化があったときにイベントを受け取れるようにもできるので、ReactなにそれjQueryおいしい、みたいな案件では役に立つ感じがする。アーミーナイフのように知っておいて損はない知識かなと思う。

詳しくは以下を参照。