Question

所以我一直在喋喋不休地谈论使用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没有实现接口Node”。无论我看过哪些例子并尝试使用过;用所需的jQuery选择器替换示例中的选择器（同样非jQ选择器也返回了相同的问题）。

Answer 1

首先你肯定不应该使用jQ选择器，因为它们不是Node元素。第二，您必须确保查询选择器返回非null。为了确保在document.body上第一次尝试观察者：它绝对是一个Node对象。像

这样的东西

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

当您熟悉定位观察者并了解MutationObserverInit选项值（它们描述得不尽如人意）时，您将能够正确使用mutationObserver。

Answer 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);

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

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

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

Answer 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/

困惑关于MutationObserver

3 个答案: