Hatena::ブログ(Diary)

イノベートな非日常 Twitter

2015-12-22

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

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秒毎に実行して監視するとかよりは大分まし

参考

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/IT7C/20151222/1450771078
リンク元