javascript - 我可以监视 HTML DIV 上的更改吗？

Question

我正在开发一个复杂的网络应用程序。

在其中，有一个 div 会被更新。它打印类似的东西

[1/4]
[2/4]
[3/4]
[4/4]

可能某处的某些javascript正在更新，例如：

div.innerHTML = "[2/4]"; 

我的问题是：

我可以以某种方式拦截/（听）innerHTML 更改，以便我可以监控它们需要多长时间。

我处于可以注入任何javascript的位置，我想收集类似的东西

console.log("1/4 has been called at timestamp");
console.log("2/4 has been called at timestamp");
console.log("3/4 has been called at timestamp");
...

Answer 1

如果您的目标浏览器支持突变事件，您也许可以使用突变事件来执行此操作。这是一个小的 jsFiddle 演示，它应该在支持突变事件的浏览器中工作。我在 Chrome 23 中对此进行了测试

JavaScript：

var observable = document.getElementById('observable');

observable.addEventListener('DOMSubtreeModified', function(ev) {
  console.log(ev.target.nodeValue, ev.timeStamp);
}, false);

var i = 0;

observable.addEventListener('click', function(ev) {
    observable.innerHTML = ++i;
    return false;
}, false);​

HTML：

​&lt;div id="observable">click me and look at the console</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS：

​#observable {
    background-color:lightblue;
    height:42px;
}​