Mutation Observer erkennt keine Textänderung

Question 1

Ich kratze mich am Kopf, warum MutationObserver keine Textänderungen erkennt, die mit textContent vorgenommen wurden.

HTML

<div id="mainContainer">
  <h1>Heading</h1>
  <p>Paragraph.</p>
</div>

JavaScript

function mutate(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.type);
  });
}

jQuery(document).ready(function() {
  setTimeout(function() {
    document.querySelector('div#mainContainer > p').textContent="Some other text.";
  }, 2000);

  var target = document.querySelector('div#mainContainer > p')
  var observer = new MutationObserver( mutate );
  var config = { characterData: true, attributes: false, childList: false, subtree: true };

  observer.observe(target, config);
});

Im obigen Skript ändert sich der Textinhalt des Absatzelements deutlich, MutationObserver erkennt dies jedoch nicht.

Wenn Sie jedoch textContent in innerHTML ändern, werden Sie gewarnt, dass sich die „characterData“ geändert haben.

Warum erkennt MutationObserver innerHTML, aber nicht textContent?

Hier ist die JS-Geige:

https://jsfiddle.net/0vp8t8x7/

Beachten Sie, dass Sie nur benachrichtigt werden, wenn Sie textContent in innerHTML ändern.

Question 2

Es ist, weil textContent löst ein anderes aus Rückgeld als innerHTMLund Ihre Observer-Konfiguration ist nicht konfiguriert, um die Änderungen zu beobachten, die von vorgenommen wurden textContent.

textContent ändert den untergeordneten Textknoten des Ziels. Entsprechend MDN Einstellung textContent:

Wenn Sie diese Eigenschaft für einen Knoten festlegen, werden alle untergeordneten Knoten entfernt und durch einen einzelnen Textknoten mit dem angegebenen Wert ersetzt.

Während innerHTML ändert das Element selbst und seinen Unterbaum.

Also zu fangen innerHTML Ihre Konfiguration sollte sein:

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

Während zu fangen textContent verwenden:

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

Demo:

function mutate(mutations) {
  mutations.forEach(function(mutation) {
    alert(mutation.type);
  });
}

  setTimeout(function() {
    document.querySelector('div#mainContainer > p').textContent="some other text.";
  }, 1000);
  
  var target = document.querySelector('div#mainContainer > p')
  var observer = new MutationObserver( mutate );
  var config = { characterData: false, attributes: false, childList: true, subtree: false };

  observer.observe(target, config);

<div id="mainContainer">
  <h1>Heading</h1>
  <p>Paragraph.</p>
</div>