valid,invalid

関心を持てる事柄について

MutationObserver

JavaScriptでDOMを監視して何かしらのコールバックを実行する際にMutationObserverが使える。

仮想DOM全盛時代でなくとも、jQueryでもvanilla JSでもイベントハンドラを自由に設定できるようなWebフロントエンドの世界で使い道あるか?と思っていたが、利用しているSaaSASPにユーザースクリプトを埋め込むケースなど、自身ではコントロール下にないサイトで何かやるときに使える。

Example

.cardセレクタで取得できるDOMに子要素が追加されたのをトリガーにコールバックを実行する例。

.cardの下に消したい要素.noiseがいたら取り除く。

 const mutationObserver = new MutationObserver(() => {  
   if ($('.noise').length) {
     $('.noise').remove();
   }
 });
 
 mutationObserver.observe(document.querySelector('.card'), { childList: true });

他にも属性・テキスト・子要素など監視対象を細かく指定できる。


直近で役に立ったのは、Zendeskヘルプセンターの表示を動的に切り替えるカスタムスクリプトを書いたとき。

ユーザー操作に応じてZendeskが何らかのDOM操作を行うのをトリガーとし、DOM操作に追従して見た目をコントロールしたいときにMutationObserverが使えた。

Zendesk本家の挙動はブラックボックス*1で、動的に謎のDOMが減ったり増えたりするのでシンプルなイベントハンドラでは対応ができなかった。


試してないけど、はてなブログJavaScriptを実行して広告を消したりもできるのかもしれない*2

*1:正確にいうと多少はリバースエンジニアリングできるが

*2:僕は広告表示されて構わないので無課金ですが、広告非表示は有料会員の機能なので消したいならちゃんと課金しましょう