如何使用MutationObserver？

Question

我最近遇到了这个很棒的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修改相同的代码,一切似乎都很好(这里是演示).有没有我在文档中遗漏的东西,或者我只是误解了观察者的特征.

Answer 1

你需要 subtree: true

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

内部文本通常是DOM中的子text()元素.没有子树,它只会观察元素本身.

围绕"characterData"(https://developer.mozilla.org/en-US/docs/Web/API/CharacterData)可能存在混淆,但似乎这仅适用于直接包含文本的节点.DOM的结构使得大多数标记元素包含混合类型,其可选地包括子文本节点(其反过来将实现characterData,但是将是目标节点的子节点).