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

Javascript 单个MutationObserver对象可以观察多个目标吗?,javascript,html,dom,mutation-observers,Javascript,Html,Dom,Mutation Observers,我想使用一个对象来观察对一些DOM节点的更改 文档给出了创建MutationObserver对象并将其注册到目标上的示例 // select the target node var target = document.querySelector('#some-id'); // create an observer instance var observer = new MutationObserver(function(mutations) { mutations.forEach(func

我想使用一个对象来观察对一些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);
观察者

  • 现在要观察两个目标吗
  • 它会停止观察目标吗
  • 它会决定不遵守目标2吗
  • 它会抛出错误吗
  • 还是会表现出其他一些行为

根据您的定义,观察者现在将观察两个目标-
target
target2
。不会抛出任何错误,
target
不会“取消注册”而支持
target2
。不会出现意外或其他行为

下面是一个示例,它在两个contenteditable元素上使用相同的
MutationObserver
。要查看此内容,请从每个
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>

跨度A
跨度B

var observer=新的突变观察者(函数(突变){
突变。forEach(功能(突变){

//console.log($(mutation.removedNodes));//非常好!虽然我想知道这是否在所有浏览器中都能保持一致,我想知道如果您碰巧在开始观察的元素中观察到一个元素,这是否是一致的?还需要注意的是,多次观察同一个目标不会导致多次调用回调以更改该元素。@NoBugs@major-mann无论是对同一个元素的多次观察,还是对两个元素(其中一个元素在另一个元素内)的观察,都不会导致多个突变记录(也不会导致多个
突变。addedNodes
)当我在Chrome 56上进行测试时,通过了监听功能。这有一个问题:我们如何不观察我们正在观察的元素之一?它看起来像
disconnect()
方法将使MutationObserver停止观察所有元素!这意味着没有对每个元素进行清理,这意味着可能存在内存泄漏!!我猜您必须断开连接,然后重新观察所需的元素。我几乎更愿意将实时HTMLCollection传递给它,让它自动观察所有这些元素甚至在添加和删除节点时。是否可以通过
MutationObserver
观察
{}
的更改??
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);