一个MutationObserver对象可以观察多个目标吗？ [英] Can a single MutationObserver object observe multiple targets?

问题描述

我想使用 MutationObserver 对象来观察我的一些DOM节点的变化。

该文档提供了一个创建 MutationObserver 对象并在目标上注册的示例。

  //选择目标节点
 var target = document.querySelector（'＃some-id'）; 
 
 //创建一个观察器实例
 var observer = new MutationObserver（function（mutations）{
 mutations.forEach（function（mutation）{
 console.log mutation.type）; 
}）; 
}）; 
 
 //观察者的配置：
 var config = {attributes：true，childList：true，characterData：true}; 
 
 //传入目标节点，以及观察者选项
 observer.observe（target，config）; 
  

---

说我有上面的代码，它，我放置这个代码：

  var target2 = document.querySelector（'＃some-other-id'）; 
 var config2 = {attributes：true，subtree：true}; 
 observer.observe（target2，config2）; 
  

将观察者：

• 现在正在观察2个目标？


• 将停止观察目标？


• 将决定不遵守 target2 ？


• 会抛出错误？


• 还是会显示其他行为？

解决方案>

观察者现在将按照您的定义观看两个目标 - 目标和 target2 。将不会抛出错误， target 将不会被未注册，而不支持 target2 。

这是一个示例，它使用相同的 MutationObserver 两个可内容元素。要查看此内容，请从每个 contenteditable 元素中删除< span> 节点，并查看所观察元素的行为跨度。

 < div id =myTextAreacontenteditable =true> 
< span contenteditable =false>跨度A< / span> 
< / div> 
 
< div id =myTextArea2contenteditable =true> 
< span contenteditable =false> Span B< / span> 
< / div> 
  

---

  var observer = new MutationObserver（function（mutations）{
 mutations.forEach（function（mutation）{
 //console.log($(mutation.removedNodes））; //<文本节点
 
 $（mutation.removedNodes）.each（function（value，index）{
 if（this.nodeType === 1）{
 console.log ）
} 
}）; 
}）; 
}）; 
 
 var config = {attributes：true，childList：true，characterData：true}; 
 
 observer.observe（$（'＃myTextArea'）[0]，config）; 
 
 observer.observe（$（'＃myTextArea2'）[0]，config）; 
  

JSFiddle链接< a> - 演示

请注意，我已经为此第一个演示回收了相同的配置，但是放置一个新的配置将是该观察元素的排他。以 config2 中的定义为例，如果在＃myTextArea2 上使用，您将看不到每个配置选项，但请注意 #myTextArea 的观察者不受影响。

JSFiddle Link - 演示 - 配置排他性

I would like to use a MutationObserver object to observe changes to some of my DOM nodes.

The docs give an example of creating a MutationObserver object and registering it on a target.

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

---

Say I have the code above, but just under it, I place this code:

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

Will observer:

• now be observing 2 targets?
• will it stop observing target?
• will it decide not to observe target2?
• will it throw an error?
• or will it exhibit some other behavior?

解决方案

The observer will now be watching two targets - target and target2 per your definitions. No error will be thrown, and target will not be "unregistered" in favor of target2. No unexpected or other behaviors will be exhibited.

Here is a sample which uses the same MutationObserver on two contenteditable elements. To view this, delete the <span> node from each contenteditable element and view the behavior span across both observed elements.

<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 Link - demo

Note that I have recycled the same config for this first demo, but, placing a new config will be exclusive to that observed element. Taking your example as defined in config2, if used on #myTextArea2, you'll not see the logged node per the configuration options, but notice that the observer for #myTextArea is unaffected.

JSFiddle Link - demo - configuration exclusiveness

这篇关于一个MutationObserver对象可以观察多个目标吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！