15

MutationObserver私は最近、任意の dom 要素の変更を追跡するこの素晴らしい機能に出くわしました。mozilla 開発者ネットワークで示されたコードを使用しましたが、実行できないようです。これは私が使用したコードです（リンク）：

   // create an observer instance
var target = document.querySelector('#something');
console.log(target);
var observer = new WebKitMutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      console.log("Success");
        //$('#log').text('input text changed: "' + target.text() + '"');
        //console.log(mutation, mutation.type);
    });    
});
observer.observe(target, { attributes: true, childList: true, characterData: true });
//observer.disconnect(); - to stop observing

// test case
setInterval(function(){
    document.querySelector('#something').innerHTML = Math.random();
},1000);

上記のコードは機能しないようです。ただし、同じコードを少し jQuery で変更すると、すべて問題なく動作するように見えます (デモはこちら)。ドキュメントに欠けているものがありますか、それともオブザーバー機能を誤解しているだけですか。

4

3 に答える 3

13

あなたが必要subtree: true

http://jsfiddle.net/6Jajs/1/

通常、内側のテキストは DOM の子 text() 要素になります。サブツリーがなければ、要素自体のみを監視します。

「characterData」( https://developer.mozilla.org/en-US/docs/Web/API/CharacterData ) に関して混乱が生じる可能性がありますが、それはテキストを直接含むノードにのみ適用されるようです。DOM は、ほとんどのマークアップ要素が混合型を含み、オプションで子テキスト ノードを含むように構造化されています (これは、次に characterData を実装しますが、ターゲット ノードの子になります)。

于 2014-06-21T17:29:29.357 に答える