javascript - 如何使用 MutationObserver 监听对象文本的变化？

Question

假设我有这样的跨度

<span id="theSpan"></span>

使用 WebKitMutationObserver(我正在为 chrome 开发一个扩展，所以不用担心跨浏览器问题)，我如何监听范围内的变化(innerText)？ IE。当我这样做时，事件应该触发:
Javascript

$("#theSpan").text('hello world');

HTML

<span id="theSpan">Hello World</span>

Answer 1

您需要创建 WebKitMutationObserver实例，然后简单地将其附加到您的 <span>使用 observe方法。代码将如下所示:

// find element and create an observer instance
var target = $('#theSpan');
var observer = new WebKitMutationObserver(function(mutations) {
    $('#log').text('input text changed: "' + target.text() + '"');
});
observer.observe(target[0], { childList: true});
//observer.disconnect(); - call this to stop observing

// test case
setInterval(function(){
    target.text('hello world ' + Math.random() + '!!!');
},1000);
​

不要忘记将真正的 DOM 对象传递给观察者，而不是 jQuery 对象。可用的工作 fiddle here