Может ли один объект MutationObserver наблюдать несколько целей?

Я хотел бы использовать объект 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?
  • будет ли это ошибка?
  • или он проявит какое-то другое поведение?

Ответы

Ответ 1

Наблюдатель теперь будет наблюдать две цели - target и target2 за ваши определения. Ошибка не будет выбрана, а target не будет "незарегистрирована" в пользу target2. Никакое неожиданное или другое поведение не будет представлено.

Вот пример, который использует те же MutationObserver для двух контент-элементов. Чтобы просмотреть это, удалите <span> node из каждого элемента 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 Link - демо

Обратите внимание, что я переработал ту же конфигурацию для этой первой демонстрации, но размещение новой конфигурации будет эксклюзивным для этого наблюдаемого элемента. Взяв ваш пример, как определено в config2, если он используется в #myTextArea2, вы не увидите зарегистрированный node для параметров конфигурации, но обратите внимание, что наблюдатель для #myTextArea не затронут.

JSFiddle Link - демонстрационная конфигурация