Javascript Girl
  1. Javascript Girl
  3. Différence entre le contenu du texte et le texte intérieur
Intereting Posts
Pourquoi avons-nous besoin de ng-click? Comment charger RxJS (et zone.js / reflect-metadata) avec Angular 2 (bêta et plus récente) Surmontant une fonction définie dans la fermeture de jquery Transfert JSON de bigint: 12000000000002539 est converti en 12000000000002540? Optimiser le site Web pour les appareils tactiles Problèmes avec Date () lors de l'utilisation de JSON.stringify () et JSON.parse () Fonctionner à l'intérieur pour les erreurs de boucle dans le rapporteur Ouvrir l'URL dans la même fenêtre et dans le même onglet Javascript: comparaison d'égalité entre deux objets / tableau Type + Jquery Ajax + this JQuery déclenche ne pas fonctionner dans IE. Pourquoi? L'importation de ES6 en utilisant le chemin d'accès ('@') dans un projet vue.js à l'aide de Webpack Comment puis-je utiliser le compilateur Google Closure pour supprimer le code JavaScript non utilisé? Comment obtenir un élément par innerText Comment Facebook change-t-il l'URL sans recharger la page?

Différence entre le contenu du texte et le texte intérieur

Quelle est la différence entre textContent innerText en javascript?

Puis-je utiliser textContent comme suit: 

var logo$ = document.getElementsByClassName('logo')[0]; logo$.textContent = "Example";

Aucune des autres réponses ne permet de fournir l'explication complète, donc celle-ci. Les principales différences entre innerText et innerText sont très bien décrites dans le blogpos de Kelly Norton: innerText vs. textContent . Vous trouverez ci-dessous un résumé:

  1. innerText n'était pas standard, alors que textContent était normalisé plus tôt.
  2. innerText renvoie le texte visible contenu dans un nœud, tandis que textContent renvoie le texte intégral. Par exemple, sur le HTML suivant <span>Hello <span style="display: none;">World</span></span> , innerText renverra 'Hello', tandis que textContent renverra 'Hello World'. Pour une liste plus complète des différences, consultez le tableau à http://perfectionkills.com/the-poor-misunderstood-innerText/ .
  3. En conséquence, innerText est beaucoup plus performant: il requiert des informations de mise en page pour renvoyer le résultat.

Une solution de contournement pour textContent dans IE8- impliquerait une fonction récursive à l'aide de nodeValue sur tous les nœuds nodeValue du nœud spécifié, voici un essai au polyfill: 

 function textContent(rootNode) { if ('textContent' in document.createTextNode('')) return rootNode.textContent; var childNodes = rootNode.childNodes, len = childNodes.length, result = ''; for (var i = 0; i < len; i++) { if (childNodes[i].nodeType === 3) result += childNodes[i].nodeValue; else if (childNodes[i].nodeType === 1) result += textContent(childNodes[i]); } return result; }

TextContent est pris en charge par la plupart des navigateurs. Il n'est pas pris en charge par ie8 ou plus tôt, mais un polyfill peut être utilisé pour cela

La propriété textContent définit ou renvoie le contenu textuel du nœud spécifié et tous ses descendants.

Voir http://www.w3schools.com/jsref/prop_node_textcontent.asp

La différence est que innerText est non standard et textContent est normalisé. Voici l'avertissement officiel pour innerText.

Cette fonctionnalité n'est pas standard et n'est pas sur une piste standard. Ne l'utilisez pas sur les sites de production face au Web: cela ne fonctionnera pas pour chaque utilisateur. Il peut également y avoir de grandes incompatibilités entre les implémentations et le comportement peut changer à l'avenir.

Alors que textContent fonctionne avec la plupart des navigateurs, cela ne fonctionne pas sur ie8 ou plus tôt. Utilisez ce polyfill pour qu'il fonctionne uniquement sur IE8. Ce polyfill ne fonctionnera pas avec ie7 ou plus tôt. 

 if (Object.defineProperty && Object.getOwnPropertyDescriptor && Object.getOwnPropertyDescriptor(Element.prototype, "textContent") && !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get) { (function() { var innerText = Object.getOwnPropertyDescriptor(Element.prototype, "innerText"); Object.defineProperty(Element.prototype, "textContent", { get: function() { return innerText.get.call(this); }, set: function(s) { return innerText.set.call(this, s); } } ); })(); }

La méthode Object.defineProperty est disponible dans ie9 ou plus, mais elle est disponible dans ie8 pour les objets DOM uniquement.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent