Question

目前正在制作谷歌浏览器扩展程序，我试图在更新时获取div的值（内部HTML）（注意，我们无法访问/控制它们何时更新）。现在我只是打印＆＃34;状态已更改＆＃34;每次更新时都要控制

function state() { console.log("State changed!"); }
var score = document.getElementById("money");
console.log(score);
score.addEventListener('DOMCharacterDataModified', state);

以上代码实际上打印了＃34;状态发生变化！＆＃34;在给定页面（http://orteil.dashnet.org/experiments/cookie/）上，因为div已设置为具有id属性：<div id="money">1</div>。这一切都很好。但是当我尝试在另一个页面（http://www.musictheory.net/exercises/ear-note）上执行此操作时，我无法使用相同的方法，因为他们的div设置如下：<div class="View ExerciseWebUI-score-text">1117 correct out of 1301 attempts (86%)</div>即没有id属性，但类属性。自然我必须得到不同的分数，所以我尝试了这个：

var score = document.getElementsByClassName("View ExerciseWebUI-score-text")[0];

当我运行代码时（注意，作为在页面加载时运行的扩展的一部分），由于<div class="View ExerciseWebUI-score-text">1117 correct out of 1301 attempts (86%)</div>，它正确地打印console.log(score);，但是当内部HTML发生更改时，没有其他内容被打印

有人可以帮忙吗？提前致谢

修改：

根据Ahmad Ibrahim的评论，我已经将DOM事件迁移到了突变观察者身上：

var target = document.getElementById("money");
console.log(target);
var callback = function(mutations, observer) {
    mutations.forEach(function (mutationRecord) {
        console.log(mutationRecord.target);
    });
}
var mutationObserver = new WebKitMutationObserver(callback);
var options = { characterData: true, subtree: true };
mutationObserver.observe(target, options);

再次在第一页上方工作，但是使用第二页并将目标更改为document.getElementsByClassName("View ExerciseWebUI-score-text")[0];（再次）打印节点，但不打印任何后续日志。我确信这与target变量的赋值有关。有什么建议吗？

逐个元素与元素由DOM侦听器为DOMCharacterDataModified

0 个答案: