检测 div javascript 的变化

Question

为了好玩，我正在开发一个小型 chrome 扩展，我需要它能够做的一件事是检测 div 中的文本何时被我使用的网页 itself.The 代码是：

var status = document.getElementById("status").innerHTML;
status.onchange = function() {
    console.log("CHANGE DETECTED")

这似乎不起作用，所以我应该改用什么？

注意：我不想使用 jquery，因为目前我什至还不是很精通 javascript，但如果有那么多 simpler/easier，那样就好了。

Answer 1

您不能使用 change 事件做您想做的事。在较新的浏览器上，您可以使用 Mutation Observers。在较旧的浏览器上......好吧，你要求人们升级到较新的浏览器。 :P

Answer 2

使用这个技巧

来源：https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/

// select the target node
    var target = document.querySelector('#some-id');

    // create an observer instance
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log(mutation.type);
        });
    });

    // configuration of the observer:
    var config = { attributes: true, childList: true, characterData: true }

    // pass in the target node, as well as the observer options
    observer.observe(target, config);

    // later, you can stop observing
    observer.disconnect();

检测 div javascript 的变化

detect div change in javascript

html

javascript

dom

detection