对 MutationObserver 感到困惑

Posted 2023-02-19

【中文标题】对 MutationObserver 感到困惑

【英文标题】：Confused About MutationObserver

【发布时间】：2013-05-13 06:07:51

【问题描述】：

所以我一直在为使用 MutationObserver 而烦恼，但我没有取得任何进展。我已经在 W3C 网站和 MDN 上阅读过它。在 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();

我最麻烦的部分是创建观察者实例，不确定属于那里的语法。同样在控制台中，我收到了“TypeError：Value 未实现接口节点”。 无论我查看并尝试使用哪些示例；将示例中的选择器替换为所需的 jQuery 选择器（非 jQ 选择器也会返回相同的问题）。

【问题讨论】：

MutationObserver 与 jQuery不 相关。查询选择器可能看起来类似于 sizzle，但它们不共享一个实现。

你有id为“some-id”的元素吗？

@Frits van Campen 我知道它们不相关，我正在使用 jQ 库，但是无论我是否使用 jQ 选择器，我都会收到 TypeError 消息。

@bfavaretto 我说我已经用必要的选择器替换了选择器并且仍然收到消息。

该错误表明您没有将有效的 DOM 节点传递给 observer.observe。如果您解决了这个问题（例如，仅在加载 DOM 时运行该代码），代码就可以工作（您也必须删除 disconnect 部分，因为它会删除观察者）。演示：jsfiddle.net/SdFeR

【参考方案1】：

首先你绝对不应该使用 jQ 选择器，因为它们不是 Node 元素。 其次，您必须确保查询选择器返回不为空。 为了确保第一次尝试在 document.body 上观察：它绝对是一个 Node 对象。 类似的东西

(
    new MutationObserver(function(mutationEventList)
        console.log(mutationEventList)
    )
)
.observe(document.body, 
    childList: true,
    attributes: true,
    characterData: true
)

当您熟悉以观察者为目标并了解 MutationObserverInit 选项值（它们被描述得不够好）时，您将能够正确使用 mutationObserver。

【讨论】：

是否可以通过MutationObserver 观察 的变化？？

【参考方案2】：

MutationObserver 是一个非常强大的功能，可让您监控 DOM 中节点/对象的所有类型的更改。在他们的示例中，他们在这里创建了观察者：

// create an observer instance
var observer = new MutationObserver(function(mutations) 
  mutations.forEach(function(mutation) 
    console.log(mutation.type);
  );   
);

在这里调用它：

// pass in the target node, as well as the observer options
observer.observe(target, config);

目标是一个节点，配置告诉它在该节点上监控什么。您可以监控各种事物，在他们的示例中，它们正在监控 attributes、childList 和 characterData 发生变化的时间。如果这些项目中的任何一项由于 javascript 操作或用户操作而发生更改，observer 将触发并为您提供有关更改内容的信息，并让您根据更改类型采取措施。在控制台中最容易看到它发生。

要进行测试，请确保您选择了一个有效的目标：

// select the target node
var target = document.querySelector('#some-id');

【讨论】：

是否可以通过MutationObserver 观察 的变化？？

“”是指函数吗？如果是这样，答案是否定的。 MutationObserver 用于监控 DOM 变化。

MutationObserver 仅用于监控 DOM 变化。对象内部的更改将是一种事件侦听器。

【参考方案3】：

简单的 MutationObserver：

<div contentEditable id="myID">EDIT TO FIRE</div>
<script>
let x = new MutationObserver(   function() alert('FIRED');    );
x.observe(  myID , subtree:true, characterData:true  );
</script>

观看直播：https://jsfiddle.net/bg8k0jmy/