单个 MutationObserver 对象可以观察多个目标吗？

Question

我想使用

MutationObserver

对象来观察某些 DOM 节点的变化。

文档给出了创建

MutationObserver

对象并将其注册到目标上的示例。

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

---

假设我有上面的代码，但在其下方，我放置了以下代码：

var target2 = document.querySelector('#some-other-id');
var config2 = {attributes: true, subtree: true};
observer.observe(target2, config2);

会

observer

：

• 现在正在观察 2 个目标？
• 它会停止观察吗

  target

  ？
• 它会决定不观察吗

  target2

  ？
• 会抛出错误吗？
• 或者它会表现出一些其他行为吗？

Answer 1

观察者现在将根据您的定义观察两个目标 -

target

和

target2

。不会抛出任何错误，并且

target

不会因为

target2

而“取消注册”。不会表现出意外或其他行为。

这是一个在两个可内容编辑元素上使用相同

MutationObserver

的示例。要查看此内容，请从每个

<span>

元素中删除

contenteditable

节点，然后查看两个观察到的元素之间的行为范围。

<div id="myTextArea" contenteditable="true">
    <span contenteditable="false">Span A</span>
</div>

<div id="myTextArea2" contenteditable="true">
    <span contenteditable="false">Span B</span>
</div>

---

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
      //console.log($(mutation.removedNodes)); // <<-- includes text nodes

      $(mutation.removedNodes).each(function(value, index) {
          if(this.nodeType === 1) {
              console.log(this)
          }
      });
  });
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe($('#myTextArea')[0], config);

observer.observe($('#myTextArea2')[0], config);

JSFiddle 链接 - 演示

请注意，我为第一个演示回收了相同的配置，但是，放置新的配置将独占该观察到的元素。以

config2

中定义的示例为例，如果在

#myTextArea2

上使用，您将看不到每个配置选项记录的节点，但请注意

#myTextArea

的观察者不受影响。

JSFiddle Link - 演示 - 配置独占性

Answer 2

（这应该是对已接受答案的评论，但我没有足够的声誉）

当您有一个 MutationObserver

m

当前正在观察多个节点，而您只想与一个节点“断开连接”时

e

，您可以执行以下操作：

m.observe(e, { attribute: true, attributeFilter: [] });

这将删除

e

（MDN 文档链接）上预先存在的观察者，并在

e

上添加一个虚拟观察者。