wake-up-neo.com

innerText vs innerHtml vs label vs text vs textContent vs outerText

Ich habe eine Dropdown-Liste, die von Javascript ausgefüllt wird.

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

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

Meine eigenen Untersuchungen zeigen Benchmark-Tests oder Vergleiche zwischen einigen wenigen, aber nicht allen.

Ich kann meinen eigenen gesunden Menschenverstand verwenden und das eine oder das andere wählen, da sie dasselbe Ergebnis liefern, aber ich bin besorgt, dass dies keine gute Idee sein wird, wenn sich die Daten ändern würden.

Meine Erkenntnisse sind:

  • innerText zeigt den Wert so wie er ist und ignoriert eventuell enthaltene HTML-Formatierungen
  • innerHTML zeigt den Wert an und wendet alle HTML-Formatierungen an
  • label scheint identisch mit innerText zu sein, ich kann den Unterschied nicht sehen
  • text scheint mit innerText identisch zu sein, jedoch mit der jQuery-Kurzversion
  • textContent scheint identisch mit innerText zu sein, behält jedoch die Formatierung bei (z. B. \n). 
  • outerText scheint mit innerText identisch zu sein

Meine Recherche kann mich nur so weit führen, dass ich nur das testen kann, was ich denken oder lesen kann, kann jemand bestätigen, ob meine Recherche korrekt ist und ob es etwas Besonderes über label und outerText gibt?

94
MyDaftQuestions

Von MDN :

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

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

  • innerText kennt auch den Stil und gibt den Text der ausgeblendeten Elemente nicht zurück, wohingegen textContent dies tun wird.

  • Da innerText die CSS-Gestaltung kennt, löst es einen Reflow aus, während textContent dies nicht tut.

Also wird innerText keinen Text enthalten, der von CSS verborgen wird, sondern textContent

innerHTML gibt den HTML-Code zurück, wie der Name anzeigt. Um Text innerhalb eines Elements abzurufen oder zu schreiben, wird häufig innerHTML verwendet. Stattdessen sollte textContent verwendet werden. Da der Text nicht als HTML analysiert wird, hat er wahrscheinlich eine bessere Leistung. Darüber hinaus wird ein XSS-Angriffsvektor vermieden.

Falls Sie das übersehen haben, lassen Sie es mich klarer wiederholen: Verwenden Sie nicht verwenden Sie .innerHTML, sofern Sie nicht ausdrücklich beabsichtigen, HTML in ein Element einzufügen und die erforderlichen Vorsichtsmaßnahmen getroffen haben, um sicherzustellen, dass der eingefügte HTML-Code nicht enthalten kann böswilliger Inhalt: Wenn Sie nur Text einfügen möchten, verwenden Sie .textContent, oder wenn Sie IE8 und frühere Versionen unterstützen müssen, verwenden Sie die Funktionserkennung, um zwischen .textContent und .innerText auszuschalten.

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 noch immer keine vollständige Browserübergreifende Unterstützung für alle gibt. Wenn Sie jQuery verwenden, sollten Sie sich an .text() halten, da dies die Unterschiede zwischen Browsern ausgleichen soll. *

Für einige andere: outerHTML ist im Grunde dasselbe wie innerHTML, außer dass sie die Start- und End-Tags des Elements enthält, zu dem sie gehört. Ich kann anscheinend keine Beschreibung von outerText finden. Ich denke, dass dies wahrscheinlich ein dunkles Erbe ist und sollte vermieden werden.

87
JLRishe

Eine Dropdown-Liste umfasst eine Sammlung von Option objects. Sie sollten die .text-Eigenschaft verwenden, um die Textdarstellung des Elements zu überprüfen, d. H.

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

Übrigens,

.text scheint mit .innerText identisch zu sein, jedoch mit der JQuery-Kurzversion

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

7
Ja͢ck

Nachtrag zu JLRishes ansonsten hervorragender Antwort:

Der Grund für innerText und outerText liegt in der Symmetrie mit innerHTML und outerHTML. Dies wird wichtig, wenn Sie der Eigenschaft zuweisen zuweisen.

Angenommen, Sie haben ein Element e mit 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!
6
Anonymous

Weitere Informationen finden Sie in der Browserkompatibilität http://www.quirksmode.org/dom/html/ , wenn Sie bestimmte Browser ansprechen. Es scheint, als hätten sie alle ihre eigene Art, Dinge zu tun. Deshalb ist es besser, JQuery .text () ( http://api.jquery.com/text/ ) zu verwenden, wenn Sie nicht herumspielen wollen.

1
nywooz

textContent formatiert nicht (\ n)

0
Hariharan