javascriptでDOMの変更を監視するには

javascript

WEBのゲームとかでDOMの変更を検出する方法

  • #elementでDOMが追加された場合にdoTaskを実行する
$(function(){
  // 対象ノードを選択
  var target = document.querySelector('#element');
  if(!target){
    setTimeout(arguments.callee,1000);
    return false;
  }

  // オブザーバインスタンスを作成
  var observer = new MutationObserver(function(mutations) {
    if(mutations.some( x => 
         x.addedNodes 
      && x.addedNodes instanceof NodeList 
      && x.addedNodes.length > 0 
      && x.type == 'childList'
    )){
      doTask();
    }
  });

  // 対象ノードとオブザーバの設定を渡す
  observer.observe(target, { childList: true, subtree: true });

DOMイベントの時と比べるとまとめて変更のイベントを受け取れるので、setTimeoutなどを使って遅延させる必要がないのでそこは楽。
ただし、色々できる分、初期設定がちょっとめんどくさい。
また、insert/delete/modifyの個別のイベント取得はできないので
自分で判別をしてあげる必要がある。

が、まとめて変更内容が配列で届くため、someとかを使って判定する必要がある。DOMのinsertがあったらタスクを実行とかしたいだけなのに、コードが冗長になる。

以下DOMイベントでDOMを監視する方法は廃止予定

$('body').on('DOMSubtreeModified propertychange',function(){
 .
 .
 .
});

但し、仮想DOMとかを使ってまとめてDOM更新をしていないと、1度につき4〜5回イベントが発生してしまうので、参考URL等みたいにタイマーとかで遅延実行した方がいいかも。

setIntervalで1秒毎に実行して監視するとかよりは大分まし

参考