nodeValue vs innerHTML et textContent. Comment choisir?
j'utilise simplement js pour modifier le texte interne d'un élément d'étiquette, et je n'étais pas sûr de savoir pour quelles raisons j'utiliserais innerHTML ou nodeValue ou textContent. Je n'ai pas besoin de créer un nouveau noeud ou de changer les éléments HTML ou quoi que ce soit - il suffit de remplacer le texte. Voici un exemple du 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 il utilise nodeValue exactement une fois, mais innerHTML et textContent plusieurs fois. Puis j'ai trouvé ce test jsperf qui indique le firstChild.nodeValue est beaucoup plus rapide. Au moins c'est ce que j'interprète.
si premier enfant.nodeValue est tellement plus rapide, Quel est le piège? N'est-il pas largement pris en charge? Est-il un autre problème?
4 réponses
Différences entre les textContent/innerText/innerHTML sur MDN.
Et une réponse sur Stackoverflow innerText/nodeValue.
résumé
- nodeValue est un peu plus confus à utiliser, mais plus rapide que innerHTML.
- innerHTML analyse de contenu comme HTML et prend plus de temps.
- textContent utilise du texte droit, ne parle pas HTML, et est plus rapide.
- innerText prend en considération les styles. Il n'y aura pas de texte caché par exemple.
innerText n'existait pas dans firefox jusqu'à ce que FireFox 45 selon caniuse mais est maintenant pris en charge dans tous les principaux navigateurs.
.textContent sorties text/plain , alors que .innerHTML sorties text/html .
Rapide exemple:
var example = document.getElementById('exampleId');
example.textContent = '<a href="https://google.com">google</a>';
sortie: google
example.innerHTML = '<a href="https://google.com">google</a>';
sortie: google
vous pouvez voir du premier exemple que la sortie de type text/plain n'est pas analysé par le navigateur et résulte dans l'affichage du contenu complet. Sortie de type text/html indique au navigateur de l'analyser avant de l'afficher.
les deux que je connais bien et avec qui je travaille sont innerHTML et textContent .
j'utilise textContent quand je veux juste changer le texte d'un paragraphe ou d'un titre comme:
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>So, textContent change juste le texte, mais il ne parse pas HTML, comme on peut le voir à partir des tags visibles dans le texte en clair 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 second 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 grosse faille de sécurité : )
(consultez XSS si vous voulez en savoir plus sur la sécurité pour cela)
innerText est à peu près ce que vous obtiendriez si vous sélectionniez le texte et le copiez. Les éléments qui ne sont pas rendus ne sont pas présents dans le texte interne.
textContent est une concaténation des valeurs de tous TextNodes dans le sous-arbre. Si le rendu ou non.
Voici une grande poste détaillant les différences
innerHTML ne doit pas être inclus dans une comparaison avec innerText ou textContent, car il est totalement diffrent, et vous devez vraiment savoir pourquoi: -) rechercher séparément