一尘不染

是否有JavaScript / jQuery DOM更改侦听器?

javascript

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


阅读 322

收藏
2020-04-22

共1个答案

一尘不染

长期以来,DOM3突变事件是最佳的可用解决方案,但由于性能原因,不建议使用它们。DOM4突变观察者代替了不推荐使用的DOM3突变事件。目前,它们在现代浏览器中的实现方式为MutationObserver(或WebKitMutationObserver在旧版Chrome中由供应商前缀实现):

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及其整个子树上的更改,并将在元素属性更改和结构更改时触发。规范草案包含有效的变异侦听器属性的完整列表:

childList

  • 设置为true是否要观察到目标儿童的突变。

childList

  • 设置为true是否要观察到目标属性的突变。

characterData

  • 设置为true是否将观察到目标数据的变异。

subtree

  • 设置为true是否不仅要观察目标,还要观察目标的后代的突变。

attributeOldValue

  • 设置为trueif时attributes将其设置为true,并在需要记录突变之前将其属性值设置为目标。

characterDataOldValue

  • 设置为trueif如果characterData设置为true,则需要记录突变之前的目标数据。

attributeFilter

  • 如果不需要观察所有属性突变,则设置为属性本地名称(无名称空间)的列表。

可以检查规格中是否有任何更改

2020-04-22