MutationObserverでDOM変更検知

最近、JSでDOMが書き換えられるサイトが多すぎて、純粋にスクレイピングしようとすると結構辛かったりします。
スクレイピングに限らず、実務であっても、なぜか効かせたいJSが効かない問題はおおよそタイミングの問題であることがあります。
微妙にsetTimeout入れたりして、疑似スリープしたりして解決するわけですが・・・。

そこでMutationObserver。

MutationObserver

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

対象にするDOMとオプションを指定して、コールバック書いて、「変更があったらこれやってね」と書くだけです。簡単。

// 変更検知するDOM
const $targetNode = document.getElementById('target-dom');
const config = { attributes: true, childList: true, subtree: true };

const observer = new MutationObserver(((mutation, observer) => {
  alert('対象のDOMが変更されました');
});

observer.observe($targetNode, config);

mutationにはDOMの情報が入ってくるので、もっと詳しいことがしたいならそこで頑張りましょう。