JavaScriptでDOMを監視して何かしらのコールバックを実行する際にMutationObserverが使える。
仮想DOM全盛時代でなくとも、jQueryでもvanilla JSでもイベントハンドラを自由に設定できるようなWebフロントエンドの世界で使い道あるか？と思っていたが、利用しているSaaSやASPにユーザースクリプトを埋め込むケースなど、自身ではコントロール下にないサイトで何かやるときに使える。
Example
.cardセレクタで取得できるDOMに子要素が追加されたのをトリガーにコールバックを実行する例。
.cardの下に消したい要素.noiseがいたら取り除く。
const mutationObserver = new MutationObserver(() => { if ($('.noise').length) { $('.noise').remove(); } }); mutationObserver.observe(document.querySelector('.card'), { childList: true });
他にも属性・テキスト・子要素など監視対象を細かく指定できる。
- https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
- https://qiita.com/munieru_jp/items/a6f1433652124a2165e4
直近で役に立ったのは、Zendeskヘルプセンターの表示を動的に切り替えるカスタムスクリプトを書いたとき。
ユーザー操作に応じてZendeskが何らかのDOM操作を行うのをトリガーとし、DOM操作に追従して見た目をコントロールしたいときにMutationObserverが使えた。
Zendesk本家の挙動はブラックボックス*1で、動的に謎のDOMが減ったり増えたりするのでシンプルなイベントハンドラでは対応ができなかった。
試してないけど、はてなブログでJavaScriptを実行して広告を消したりもできるのかもしれない*2。
*1:正確にいうと多少はリバースエンジニアリングできるが
