Kann ein einzelnes MutationObserver-Objekt mehrere Ziele beobachten?

Ich möchte eine verwenden MutationObserver Objekt, um Änderungen an einigen meiner DOM-Knoten zu beobachten.

Die Dokumentation enthält ein Beispiel zum Erstellen einer MutationObserver Objekt und Registrierung auf einem Ziel.

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

Angenommen, ich habe den obigen Code, aber direkt darunter platziere ich diesen Code:

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

Werden observer:

• jetzt 2 Ziele beobachten?
• wird es aufhören zu beobachten target?
• wird es entscheiden, nicht zu beobachten target2?
• wird es einen Fehler werfen?
• oder wird es ein anderes Verhalten zeigen?

Der Beobachter beobachtet nun zwei Ziele – target und target2 nach Ihren Definitionen. Es wird kein Fehler ausgegeben, und target wird nicht zugunsten von “abgemeldet”. target2. Es werden keine unerwarteten oder anderen Verhaltensweisen gezeigt.

Hier ist ein Beispiel, das dasselbe verwendet MutationObserver auf zwei contenteditable Elemente. Um dies anzuzeigen, löschen Sie die <span> Knoten von jedem contenteditable Element und zeigen Sie die Verhaltensspanne über beide beobachteten Elemente an.

<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 – demonstrieren

Beachten Sie, dass ich dieselbe Konfiguration für diese erste Demo wiederverwendet habe, aber das Platzieren einer neuen Konfiguration wird ausschließlich für dieses beobachtete Element gelten. Nehmen Sie Ihr Beispiel, wie in definiert config2falls verwendet auf #myTextArea2sehen Sie den protokollierten Knoten nicht gemäß den Konfigurationsoptionen, aber beachten Sie, dass der Beobachter für #myTextArea ist unbeeinflusst.

JSFiddle-Link – Demo – Exklusivität der Konfiguration