javascript - 监控页面中的元素

Question

我正在开发 Google Chrome 扩展程序，它会在某些网站中查找某些元素并以某种方式更改它们(这么多“一些”，嗯:-))。加载 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);

但这看起来很愚蠢，而且在我看来，性能很糟糕。

我可以在创建/更改元素时创建一些触发器吗？这样做的惯用 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();