innerText vs innerHTML vs label vs text vs textContent vs äußereText

Ich habe eine Dropdown-Liste, die mit Javascript gefüllt ist.

Bei der Entscheidung, welcher Standardwert beim Laden angezeigt werden soll, wurde mir klar, dass die folgenden Eigenschaften genau dieselben Werte aufweisen:

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

Meine eigene Forschung zeigt Benchmarking-Tests oder Vergleiche zwischen einigen von ihnen, aber nicht allen.

Ich kann meinen eigenen gesunden Menschenverstand verwenden und den einen oder anderen wählen, da sie das gleiche Ergebnis liefern, aber ich befürchte, dass dies keine gute Idee ist, wenn sich die Daten ändern.

Meine Ergebnisse sind:

• innerText zeigt den Wert unverändert an und ignoriert eventuell enthaltene HTML-Formatierungen
• innerHTML zeigt den Wert an und wendet alle HTML-Formatierungen an
• labelscheint das gleiche zu sein wie innerText, also kann ich den Unterschied nicht sehen
• textscheint die gleiche zu sein wie innerTextdie jQuery-Kurzversion
• textContenterscheint gleich innerText, formatiert aber weiter (z. B. \n)
• outerText scheint das gleiche zu sein wie innerText

Meine Forschung kann mich nur so weit bringen, dass ich nur testen kann, woran ich denken oder was veröffentlicht wird. Kann jemand jedoch bestätigen, ob meine Forschung korrekt ist und ob etwas Besonderes an labelund ist outerText?

Von MDN :

Internet Explorer führte element.innerText ein. Die Absicht ist ziemlich gleich [wie bei textContent] mit ein paar Unterschieden:

• Beachten Sie, dass textContent zwar den Inhalt aller Elemente einschließlich <script>und <style>Elemente abruft, die meist äquivalente IE-spezifische Eigenschaft innerText jedoch nicht.

• innerText kennt auch den Stil und gibt den Text versteckter Elemente nicht zurück, während textContent dies tut.

• Da innerText das CSS-Styling kennt, wird ein Reflow ausgelöst, während textContent dies nicht tut.

Enthält also innerTextkeinen Text, der von CSS ausgeblendet wird, sondern textContentwird.

innerHTML gibt den HTML-Code zurück, wie der Name schon sagt. Sehr oft verwenden Menschen innerHTML, um Text innerhalb eines Elements abzurufen oder zu schreiben. Stattdessen sollte textContent verwendet werden. Da der Text nicht als HTML analysiert wird, ist die Leistung wahrscheinlich besser. Darüber hinaus wird dadurch ein XSS-Angriffsvektor vermieden.

Im Fall verpassen Sie, lassen Sie mich wiederholen deutlicher: Do nicht verwenden , .innerHTMLum Insert HTML innerhalb eines Elements und die notwendigen Vorkehrungen getroffen , um sicherzustellen , sofern Sie nicht ausdrücklich die Absicht , dass die HTML Sie einfügen nicht bösartige Inhalte enthalten können. Wenn Sie nur Text einfügen möchten, verwenden Sie .textContentoder wenn Sie IE8 und früher unterstützen müssen, verwenden Sie die Funktionserkennung, um zwischen .textContentund auszuschalten .innerText.

Ein Hauptgrund dafür, dass es so viele verschiedene Eigenschaften gibt, ist, dass verschiedene Browser ursprünglich unterschiedliche Namen für diese Eigenschaften hatten und es immer noch keine vollständige browserübergreifende Unterstützung für alle gibt. Wenn Sie jQuery verwenden, sollten Sie sich daran halten, .text()da dies dazu dient, browserübergreifende Unterschiede auszugleichen. *

Für einige der anderen: outerHTMList im Grunde dasselbe wie innerHTML, außer dass es die Start- und End-Tags des Elements enthält, zu dem es gehört. Ich kann anscheinend nicht viel Beschreibung finden outerText. Ich denke, das ist wahrscheinlich ein obskures Vermächtnis und sollte vermieden werden.

Eine Dropdown-Liste enthält eine Sammlung von OptionObjekten. Verwenden Sie daher die .textEigenschaft, um die Textdarstellung des Elements zu überprüfen

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

Übrigens,

.textscheint dasselbe zu sein wie .innerTextdie JQuery-Kurzversion

Das ist nicht richtig; $(element).text()ist die jQuery-Version, während element.textdie Eigenschaftszugriffsversion ist.

Nachtrag zu JLRishes ansonsten ausgezeichneter Antwort:

Der Grund, warum innerText und OuterText existieren, liegt in der Symmetrie mit InnerHTML und OuterHTML. Dies wird wichtig, wenn Sie der Eigenschaft zuweisen .

Angenommen, Sie haben ein Element emit HTML-Code <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 formatiert nicht (\ n)

Informationen zur Kompatibilität der Browser finden Sie unter http://www.quirksmode.org/dom/html/, wenn Sie auf bestimmte Browser abzielen. Weil es so aussieht, als hätten sie alle ihre eigene Art, Dinge zu tun. Aus diesem Grund ist es besser, JQuery .text () ( http://api.jquery.com/text/ ) zu verwenden, wenn Sie nicht herumfummeln möchten.

textund labelentfernen Sie zusätzliche Leerzeichen. Ich habe diese Ergebnisse beim Abfragen von Optionen in einem Dropdown-Menü erhalten:

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