有没有JavaScript / jQuery DOM更改侦听器？

javascript jquery google-chrome-extension

2022-08-29 23:17:36

从本质上讲，我希望在内容更改时执行脚本。由于脚本是分开的（Chrome扩展程序和网页脚本中的内容脚本），我需要一种方法来简单地观察DOM状态的变化。我可以设置轮询，但这似乎很草率。DIV

答案 1

长期以来，DOM3 突变事件是可用的最佳解决方案，但由于性能原因，它们已被弃用。DOM4 突变观察器是已弃用的 DOM3 突变事件的替代品。它们目前在现代浏览器中实现为（或在旧版Chrome中作为供应商前缀）：MutationObserverWebKitMutationObserver

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // fired when a mutation occurs
    console.log(mutations, observer);
    // ...
});

// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
  subtree: true,
  attributes: true
  //...
});

此示例侦听 DOM 及其整个子树的更改，并将在对元素属性的更改以及结构更改时触发。规范草案包含有效突变侦听器属性的完整列表：document

子列表

设置为“如果要观察靶标子的突变”。true

属性

设置为“如果要观察目标属性的突变”。true

字符数据

设置为“如果要观察靶标数据的突变”。true

子树

设置为 if 突变不仅要靶向，还要观察靶标的后代。true

属性旧值

设置为 if 设置为 true，并在需要记录突变之前定位到目标的属性值。trueattributes

字符数据旧值

设置为 if 设置为 true，并在需要记录突变之前定位到目标的数据。truecharacterData

属性过滤器

如果不需要观察所有属性突变，请设置为属性本地名称（不带命名空间）的列表。

（此列表是截至 2014 年 4 月的最新列表;您可以查看技术指标是否有任何更改。

答案 2

编辑

此答案现已弃用。看看apsillers的答案。

由于这是针对Chrome扩展程序的，因此您最好使用标准的DOM事件 - 。请参阅跨浏览器对此事件的支持。自 1.0 以来，Chrome 一直支持它。DOMSubtreeModified

$("#someDiv").bind("DOMSubtreeModified", function() {
    alert("tree changed");
});

在此处查看工作示例。