javascript - innerText vs innerHTML vs label vs text vs textContent vs outerText

Jeg har en rullegardinliste som fylles av Javascript.

Mens jeg bestemte hva som skulle være standardverdien som vises ved lasting, innså jeg at følgende egenskaper viste nøyaktig de samme verdiene:

  • innerText
  • innerHTML
  • label
  • text
  • textContent
  • outerText

Min egen forskning viser benchmark-tester eller sammenligninger mellom noen få av dem, men ikke alle.

Jeg kan bruke min egen sunn fornuft og velge den ene eller den andre siden de gir samme resultat, men jeg er bekymret for at dette ikke vil være en god idé hvis dataene skulle endre seg.

Mine funn er:

  • innerText vil vise verdien som den er og ignorerer all HTML-formatering som måtte være inkludert
  • innerHTML vil vise verdien og bruke eventuell HTML-formatering
  • label ser ut til å være det samme som innerText, så jeg kan ikke se forskjellen
  • text ser ut til å være det samme som innerText, men jQuerys kortformversjon
  • textContent ser ut til å være det samme som innerText, men beholder formatering (som \n)
  • outerText ser ut til å være det samme som innerText

Forskningen min kan bare ta meg så langt, siden jeg bare kan teste det jeg kan komme på eller lese det som er publisert. Kan noen imidlertid bekrefte om forskningen min er korrekt, og om det er noe spesielt med label og outerText?

Svar #1

Fra MDN:

Internet Explorer introduserte element.innerText. Intensjonen er stort sett den samme [som textContent] med noen få forskjeller:

  • Merk at mens textContent henter innholdet til alle elementer, inkludert <script> og <style> elementer, gjør den stort sett ekvivalente IE-spesifikke egenskapen, innerText, det ikke.

  • innerText er også oppmerksom på stil og vil ikke returnere teksten til skjulte elementer, mens textContent vil.

  • Siden innerText er klar over CSS-styling, vil det utløse en reflow, mens textContent ikke vil.

Så innerText vil ikke inkludere tekst som er skjult av CSS, men textContent vil.

innerHTML returnerer HTML slik navnet antyder. Ofte, for å hente eller skrive tekst innenfor et element, bruker folk innerHTML. textContent bør brukes i stedet. Fordi teksten ikke blir tolket som HTML, er det sannsynlig at det gir bedre ytelse. I tillegg unngår dette en XSS-angrepsvektor.

Hvis du gikk glipp av det, la meg gjenta det tydeligere: Ikke bruk .innerHTML med mindre du spesifikt har til hensikt å sette inn HTML i et element og har tatt nødvendige forholdsregler for å sikre at HTML-en du setter inn ikke kan inneholde skadelig innhold. Hvis du bare vil sette inn tekst, bruk .textContent, eller hvis du må støtte IE8 og tidligere, bruk funksjonsdeteksjon for å bytte mellom .textContent og .innerText.

En hovedårsak til at det finnes så mange forskjellige egenskaper er at forskjellige nettlesere opprinnelig hadde forskjellige navn på disse egenskapene, og det er fortsatt ikke full støtte på tvers av nettlesere for alle dem. Hvis du bruker jQuery, bør du holde deg til .text() siden det er designet for å jevne ut forskjeller mellom nettlesere.*

For noen av de andre: outerHTML er i utgangspunktet det samme som innerHTML, bortsett fra at det inkluderer start- og slutt-taggene til elementet det tilhører. Jeg ser ut til å ikke finne mye beskrivelse av outerText i det hele tatt. Jeg tror det sannsynligvis er en obskur eldre egenskap og bør unngås.

Svar #2

Tillegg til JLRishes ellers fremragende svar:

Grunnen til at både innerText og outerText eksisterer, er for symmetri med innerHTML og outerHTML. Dette blir viktig når du tilordner egenskapen.

Anta at du har et element e med HTML-kode <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!

Svar #3

text og label fjern ekstra mellomrom. Jeg fikk disse resultatene når jeg spurte om alternativer i en nedtrekksmeny:

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

Relaterte artikler