nodeValue vs innerHTML et textContent. Comment choisir?

J'utilise plain js pour modifier le texte interne d'un élément d'étiquette, et je n'étais pas sûr pour quelles raisons je devrais utiliser innerHTML ou nodeValue ou textContent. Je n'ai pas besoin de créer un nouveau nœud ou de modifier les éléments HTML ou quoi que ce soit - remplacez simplement 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 regardé à travers la source jQuery, et elle utilise nodeValue exactement une fois mais innerHTML et textContent plusieurs fois. Ensuite, j'ai trouvé ce test jsperf qui indique que firstChild.nodeValue est beaucoup plus rapide. Du moins, c'est ce que j'interprète comme cela.

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

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

Et une réponse Stackoverflow sur innerText / nodeValue.

Résumé

1. innerHTML analyse le contenu au format HTML, donc cela prend plus de temps.
2. nodeValue utilise du texte simple, n'analyse pas le HTML et est plus rapide.
3. textContent utilise du texte simple, n'analyse pas le HTML et est plus rapide.
4. innerText Prend en compte les styles. Il n'obtiendra pas de texte caché par exemple.

innerTextn'existait pas dans Firefox jusqu'à FireFox 45 selon caniuse mais est maintenant pris en charge dans tous les principaux navigateurs.

.textContentsorties text/plaintandis que .innerHTMLsorties text/html.

Exemple rapide:

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

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

résultat: <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/plainn'est pas analysée par le navigateur et entraîne l'affichage du contenu complet. La sortie du type text/htmlindique au navigateur de l'analyser avant de l'afficher.

MDN innerHTML , MDN textContent , MDN nodeValue

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

J'utilise textContent lorsque 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>

Ainsi, textContent modifie simplement le texte, mais il n'analyse pas le HTML, comme nous pouvons le voir à partir des balises visibles en texte brut dans le résultat.

Si nous voulons analyser le 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 au format HTML.

C'est génial et une grande vulnérabilité de sécurité :)

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

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

textContent est une concaténation des valeurs de tous les TextNodes du 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 devriez vraiment savoir pourquoi :-) Recherchez-le séparément

[Remarque: ce message concerne davantage le partage de données spécifiques susceptibles d'aider quelqu'un que de dire aux gens quoi faire]

Au cas où quelqu'un se demande ce qui est le 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 du span est en texte brut, les résultats peuvent changer en fonction de son contenu)

Il semble que ce .innerHtmlsoit le grand gagnant en termes de vitesse pure!

(REMARQUE: je ne parle que de vitesse ici, vous voudrez peut-être rechercher d'autres critères avant de choisir celui à utiliser!)

Element.innerHTML set, ou getle code HTML de l'élément.

Ex: Nous avons une <h1>étiquette et un style fort avec:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Pour que le getcontenu de l'élément ait un id égal à "myHeader", nous ferons de même:

var element = document.getElementById("myHeader");
element.innerHTML

Résultat de retour:

<strong>My Header</strong> Normal Text`

Pour "définir" un nouveau contenu (valeur) pour cet élément, le code sera ici:

Element.innerHTML = "My Header My Text";

Ainsi, cette propriété fonctionne non seulement avec du texte brut, mais elle vise à transmettre ou à copier du code HTML.

=> Nous ne devons pas l'utiliser.

Cependant, de nombreux programmeurs (y compris moi-même) utilisent cet attribut pour insérer du texte dans une page Web, et cette méthode comporte un risque potentiel:

1. Mauvaise opération: l'insertion de chaque texte ne supprime que parfois tous les autres codes HTML de l'élément inséré.
2. Pour la sécurité: Bien entendu, les deux exemples ci-dessus sont totalement inoffensifs, même si l'utilisation de la balise ne pose toujours aucun problème car le standard HTML5 a empêché l'exécution de la ligne de commande à l'intérieur de la balise. lorsqu'il est inséré dans la page Web via l'attribut innerHTML. Voir cette règle ici .

Pour cette raison, l'utilisation innerHTMLn'est pas recommandée lors de l'insertion de texte brut, utilisez plutôt textContent. La textContentpropriété ne comprendra pas que le code que vous passez est une syntaxe HTML, mais juste un texte à 100% ni plus ni moins.

Le résultat retourne si vous utilisez textContentdans l'exemple ci-dessus:

My Header My Text