jQuery Girl
  1. jQuery Girl
  3. Observateur de mutation ne détectant pas le changement de texte
Intereting Posts
Remplacement de texte dans un enfant sous la division parent via JQuery Chargement de différentes versions de scripts en fonction de la version d’IE ne faisant pas défiler avec le jQuery: object append (), remove () le avec delay () Diapositive de contrôle glissable personnalisée jQuery sans interface utilisateur jQuery Utiliser JQuery pour construire une ancre Remplacement d’une fonction jQuery Core en javascript – getJSON bootstrap3-datetimepicker ne fonctionne pas toujours comme prévu Comment utiliser les données d’un appel AJAX Comment implémenter un script pour neutraliser Accent dans Datatables Comment savoir si l’utilisateur clique sur le bouton «Précédent»? jQuery Datepicker avec plusieurs options Copier certains textes d’un div dans un autre div Effet de diapositive Bootstrap Tab Pane Comment faire référence à un identifiant de composant JSF dans jQuery?

Observateur de mutation ne détectant pas le changement de texte

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

HTML 

 
Heading
 
Paragraph.

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, atsortingbutes: false, childList: false, subtree: true }; observer.observe(target, config); });

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

Toutefois, si vous modifiez textContent en innerHTML, vous serez averti que la propriété “characterData” a été modifiée.

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 changez textContent en innerHTML.

C’est parce que textContent déclenche une modification différente de innerHTML et que votre configuration d’observateur n’est pas configurée pour observer les modifications apscopes par textContent .

textContent change le noeud de texte enfant de la cible. Selon les parameters MDN , textContent :

La définition de cette propriété sur un nœud supprime tous ses enfants et les remplace par un seul nœud de texte avec la valeur donnée.

Alors que innerHTML change l’élément lui-même et son sous-arbre.

Donc, pour attraper innerHTML votre configuration devrait être: 

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

Alors que pour attraper textContent utilisez: 

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

Démo: 

 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, atsortingbutes: false, childList: true, subtree: false }; observer.observe(target, config); 
 
 
Heading
 
Paragraph.