如何拦截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";

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

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});

childList 突变触发 innerHTML 更改。

Answer 2

你不能那样听DOM元素change.change事件主要是为了inputs

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

这是一些:

DOMCharacterDataModified //草稿

DOMSubtreeModified