L'observateur de mutation ne détecte pas les changements de texte

Question

Je me demande pourquoi MutationObserver ne détecte pas les modifications de texte effectuées à l'aide de textContent.

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

Dans le script ci-dessus, le contenu textuel de l'élément paragraphe change clairement, mais MutationObserver ne le détecte pas.

Toutefois, si vous remplacez textContent par innerHTML, vous serez averti que le "characterData" a changé.

Pourquoi MutationObserver détecte-t-il innerHTML mais pas textContent ?

Voici le JS Fiddle :

https://jsfiddle.net/0vp8t8x7/

Notez que vous ne serez alerté que si vous remplacez textContent par innerHTML.

Answer 1

C'est parce que textContent déclenche une autre changer que innerHTML et que votre configuration d'observateur n'est pas configurée pour observer les changements effectués par textContent .

textContent modifie le nœud de texte enfant de la cible. Conformément à l'article MDN réglage textContent :

Définition de cette propriété sur un nœud les remplace par un seul nœud de texte avec la valeur donnée.

Tandis que innerHTML modifie l'élément lui-même et son sous-arbre.

Ainsi, pour attraper innerHTML votre configuration devrait être :

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

Pendant que l'on attrape textContent utiliser :

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

Démonstration :

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>