innerText vs innerHTML vs label vs text vs textContent vs externalText

J'ai une liste déroulante qui est remplie par Javascript.

En décidant quelle devrait être la valeur par défaut à afficher lors du chargement, j'ai réalisé que les propriétés suivantes montraient exactement les mêmes valeurs:

• innerText
• innerHtml
• label
• text
• textContent
• outerText

Ma propre recherche montre des tests d'évaluation ou des comparaisons entre quelques-uns d'entre eux, mais pas tous.

Je peux utiliser mon propre bon sens et choisir 1 ou l'autre car ils donnent le même résultat, mais je crains que ce ne soit pas une bonne idée si les données devaient changer.

Mes conclusions sont:

• innerText affichera la valeur telle quelle et ignorera tout formatage HTML pouvant être inclus
• innerHTML affichera la valeur et appliquera toute mise en forme HTML
• labelsemble être le même que innerText, donc je ne vois pas la différence
• textsemble être la même que innerTextla version abrégée de jQuery
• textContentsemble identique à innerTextmais conserve le formatage (tel que \n)
• outerText semble être le même que innerText

Mes recherches ne peuvent m'amener que dans la mesure où je ne peux tester que ce que je peux penser ou lire ce qui est publié, est-ce que quelqu'un peut confirmer si ma recherche est correcte et s'il y a quelque chose de spécial à propos de labelet outerText?

De MDN :

Internet Explorer a introduit element.innerText. L'intention est à peu près la même [que textContent] avec quelques différences:

• Notez que si textContent obtient le contenu de tous les éléments, y compris les éléments <script>et <style>, la propriété spécifique à IE la plus équivalente, innerText, ne le fait pas.

• innerText est également conscient du style et ne retournera pas le texte des éléments masqués, contrairement à textContent.

• Comme innerText est conscient du style CSS, il déclenchera une redistribution, contrairement à textContent.

N'inclura donc innerTextpas le texte masqué par CSS, mais le textContentfera.

innerHTML renvoie le HTML comme son nom l'indique. Très souvent, pour récupérer ou écrire du texte dans un élément, les gens utilisent innerHTML. textContent doit être utilisé à la place. Étant donné que le texte n'est pas analysé au format HTML, il est susceptible d'avoir de meilleures performances. De plus, cela évite un vecteur d'attaque XSS.

Au cas où vous auriez manqué cela, permettez-moi de le répéter plus clairement: ne pas utiliser à .innerHTMLmoins que vous n'ayez spécifiquement l'intention d'insérer du HTML dans un élément et que vous ayez pris les précautions nécessaires pour vous assurer que le HTML que vous insérez ne peut pas contenir de contenu malveillant. Si vous souhaitez uniquement insérer du texte, utilisez .textContentou si vous devez prendre en charge IE8 et versions antérieures, utilisez la détection de fonction pour désactiver entre .textContentet .innerText.

L'une des principales raisons pour lesquelles il existe tant de propriétés différentes est que différents navigateurs avaient à l'origine des noms différents pour ces propriétés et qu'il n'y a toujours pas de prise en charge complète de tous les navigateurs. Si vous utilisez jQuery, vous devez vous en tenir à .text()car cela est conçu pour lisser les différences entre les navigateurs. *

Pour certains des autres: outerHTMLest fondamentalement le même que innerHTML, sauf qu'il inclut les balises de début et de fin de l'élément auquel il appartient. Je n'arrive pas à trouver beaucoup de description du outerTexttout. Je pense que c'est probablement une propriété héritée obscure et devrait être évitée.

Une liste déroulante comprend une collection d' Optionobjets, vous devez donc utiliser la .textpropriété pour inspecter la représentation textuelle de l'élément, c'est-à-dire

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.textsemble être la même que .innerTextla version abrégée de JQuery

Ce n'est pas correct; $(element).text()est la version jQuery alors que element.textc'est la version d'accès à la propriété.

Addendum à la réponse par ailleurs excellente de JLRishe:

La raison pour laquelle innerText et externalText existent tous les deux est pour la symétrie avec innerHTML et externalHTML. Cela devient important lorsque vous attribuez à la propriété.

Supposons que vous ayez un élément eavec du code HTML <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

textContent ne formatera pas (\ n)

Consultez la compatibilité des navigateurs http://www.quirksmode.org/dom/html/ si vous ciblez des navigateurs spécifiques. Parce qu'il semble qu'ils ont tous leur propre façon de faire les choses. C'est pourquoi il est préférable d'utiliser JQuery .text () ( http://api.jquery.com/text/ ) si vous ne voulez pas bidouiller.

textet labelsupprimez les espaces supplémentaires. J'ai obtenu ces résultats lors de la recherche d'options dans une liste déroulante:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"