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";

代码只是一个玩具示例。在我的实际情况中，页面中的更改（因此也在单元格中）是由我无法控制的webapp进行的。

Answer 1

您无法以这种方式收听DOM元素change。 change事件主要针对input s

还有一些其他新的DOM 3事件可以帮助您。

以下是一些：

DOMCharacterDataModified //草稿

DOMSubtreeModified

Answer 2

有一种现代的方法可以捕获innerhtml更改：

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/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});```

childList mutation fires on innerHTML change.

Answer 3

这Most efficient method of detecting/monitoring DOM changes?有帮助吗？

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

如何拦截javascript中的innerHTML变化？

3 个答案: