我正在开发 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 方法是什么?
最佳答案
是的,可以。一种方法是使用 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();
关于javascript - 监控页面中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30019274/