如何在JavaScript中拦截innerHTML的更改？

Question

我需要拦截网页中单元格内容的任何更改。

以下代码向我展示了addEventListener不起作用的情况。

function modifyText() {
alert("!");
}

var el=document.getElementById("mycell");
el.innerHTML="a"
el.addEventListener("change", modifyText, false); 
// After next instruction I expect an alert message but it does not appear...
el.innerHTML="Z";

这段代码只是一个玩具示例。在我的实际情况中，页面上（因此也包括单元格）的更改是由一个我无法控制的Web应用程序进行的。

- tic

---

你在测试哪种浏览器类型？请记住，IE使用的是非标准的.attachEvent()方法。 - Phil.Wheeler

首先，这些变化是如何发生的？当你说“一个Web应用程序”时，这意味着一个服务器端应用程序构建并返回页面内容。如果是这种情况，那么JavaScript代码无法检测到更改，因为“更改”发生在JavaScript适用范围之前的服务器上。从页面上的JavaScript的角度来看，没有任何变化。 - David

Answer 1

有一种现代的方法来捕获 innerHTML 的变化：

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

示例：

// identify an element to observe
elementToObserve = window.document.getElementById('y-range').children[0];

// create a new instance of 'MutationObserver' named 'observer', 
// passing it a callback function
observer = new MutationObserver(function(mutationsList, observer) {
    console.log(mutationsList);
});

// call 'observe' on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {characterData: false, childList: true, attributes: false});

innerHTML的更改会触发childList变异。

- legale

---

最佳答案，即使是 iframe 子元素也适用。 - kungfooman

我想监控innerHTML的变化，最初我使用了一个间隔来观察innerHTML，但它不是很稳定。切换到这种方法后，它运行得非常顺畅。感谢您的答案。 - Ji_in_coding

Answer 2

以那种方式无法监听DOM元素的change事件。这个事件大多用于input。

还有一些新的DOM 3事件可以帮助你实现这个功能。

以下是其中的一些：

DOMCharacterDataModified //草案

DOMSubtreeModified

- Mohsen

---

很不幸，所有的变异事件都已被弃用！是否有其他类似DOMCharacterDataModified的神奇事件可以监听innerHTML值的更改？ - Rafe

Answer 3

这个检测/监控DOM变化最有效的方法有帮助吗？

看起来似乎没有100%跨浏览器的解决方案，其中一种解决方法是轮询感兴趣的元素，以查看它们的innerHTML.length是否发生变化！

- Paul Grime