页面中的监控元素

Question

我正在开发 Google Chrome 扩展，它在某些网站中找到一些元素并以某种方式更改它们（这么多 "some"，嗯 :-)） .这些元素在 HTML 加载时不显示，它们在页面的脚本中加载。而且，它们可能会出现得更晚。

目前我运行每隔一段时间检查一次并忽略已经处理过的元素：

var processed = [];

//...

function checkElements() {
    var elements = document.querySelectorAll(//...

    for (var i = 0; i < elements.length; ++i) {
        var element = elements[i];

        if (processed.indexOf(element) > -1) continue; // ignore processed elements
        processed.push(element);

        // process element
    }
}

setInterval(checkElements, TIMEOUT);

但这看起来很傻，而且在我看来表现很糟糕。

我可以在 creating/changing 个元素上创建一些触发器吗？这样做的惯用 JS 方法是什么？

Answer 1

是的，你可以。一种方法是使用 MutationObservers.

MutationObserver

MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.

如何操作的示例取自 MDN:

// 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();

Answer 2

您可以使用 "Mutations events" 来监听 body DOM 上的变化。 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events

例如，如果您想监听元素何时添加到 body：

var body = document.querySelector('body');
body.addEventListener("DOMNodeInserted", function (ev) {

}, false);

页面中的监控元素

Monitoring elements in page

javascript

google-chrome-extension

MutationObserver