web-dev-qa-db-fra.com

nodeValue vs innerHTML et textContent. Comment choisir?

J'utilise plain js pour modifier le texte intérieur d'un élément label, et je ne savais pas pour quels motifs utiliser interstell, HTML ou nodeValue ou textContent. Je n'ai pas besoin de créer un nouveau nœud ni de modifier les éléments HTML ou quoi que ce soit - il suffit de remplacer le texte. Voici un exemple de code:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

J'ai parcouru la source jQuery, qui utilise nodeValue exactement une fois, mais innerHTML et textContent plusieurs fois. Ensuite, j'ai trouvé ce test jsperf qui indique que le firstChild.nodeValue est nettement plus rapide. Au moins c'est ce que je comprends.

Si firstChild.nodeValue est tellement plus rapide, quel est le piège? N'est-ce pas largement supporté? Y a-t-il un autre problème?

javascriptdominnerhtmlnodevalue
115
adam Kiryk

Différences entre textContent/innerText/innerHTML sur MDN.

Et une réponse Stackoverflow à propos de innerText/nodeValue.

Résumé

  1. innerHTML analyse le contenu au format HTML, ce qui prend plus de temps.
  2. nodeValue utilise un texte simple, n'analyse pas HTML et est plus rapide.
  3. textContent utilise un texte simple, n'analyse pas HTML et est plus rapide.
  4. innerText Prend les styles en considération. Il n'y aura pas de texte caché par exemple.

innerText n’existait pas dans Firefox jusqu’à FireFox 45 selon caniuse mais est maintenant pris en charge par tous les principaux navigateurs.

137
peterfoldi

.textContent Génère text/plain Tandis que .innerHTML Génère text/html.

Exemple rapide:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

sortie: <a href="http://google.com"> google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

sortie: google

Vous pouvez voir dans le premier exemple que la sortie de type text/plain N'est pas analysée par le navigateur et entraîne l'affichage du contenu complet. La sortie de type text/html Indique au navigateur de l'analyser avant de l'afficher.

MDN innerHTML , MDN textContent , MDN nodeValue

50
Brian

Les deux que je connais bien et avec lesquels je travaille sont innerHTML et textContent.

J'utilise textContent quand je veux juste changer le texte d'un paragraphe ou d'un titre comme ceci:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six Word</em> story.'
}, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1>
<p id="paragraph">My six Word story right here.</p>

Donc, textContent change simplement le texte, mais il n’analyse pas HTML, comme on peut le voir à partir des balises visibles en texte brut dans le résultat.

Si nous voulons analyser HTML, nous utilisons innerHTML comme ceci:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six Word</em> story.'
}, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1>
<p id="paragraph">My six Word story right here.</p>

Ainsi, ce deuxième exemple analyse la chaîne que j'attribue à la propriété innerHTML de l'élément DOM en tant que HTML.

C'est génial, et une grande faille de sécurité:)

(recherchez XSS si vous voulez en savoir plus sur la sécurité)

6
Costa

innerText est à peu près ce que vous obtiendrez si vous sélectionnez le texte et le copiez. Les éléments non rendus ne sont pas présents dans innerText.

textContent est une concaténation des valeurs de all TextNodes dans le sous- arbre. Que ce soit rendu ou non.

Voici un excellent article détaillant les différences

innerHTML ne doit pas être inclus dans une comparaison avec innerText ou textContent, car il est totalement différent et vous devez vraiment savoir pourquoi :-) Regardez-le séparément

2
Drenai

[Remarque: cet article concerne davantage le partage de données spécifiques qui pourraient aider quelqu'un que d'indiquer aux gens quoi faire]

Au cas où quelqu'un se demanderait quelle est la solution la plus rapide aujourd'hui: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get -innertext-vs-innerhtml-vs-textcontent (pour le deuxième test, le contenu de la plage est en texte brut, les résultats peuvent changer en fonction de son contenu)

Il paraît que .innerHtml est le grand gagnant en termes de vitesse pure!

(NOTE: je parle seulement de vitesse ici, vous voudrez peut-être chercher d'autres critères avant de choisir lequel utiliser!)

1
Thanaen