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

Jag har en rullgardinslista som fylls i av Javascript.

När jag bestämde vilket som skulle vara standardvärdet att visa vid laddning, insåg jag att följande egenskaper visade exakt samma värden:

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

Min egen forskning visar benchmark-tester eller jämförelser mellan några av dem, men inte alla.

Jag kan använda mitt eget sunt förnuft och välja det ena eller det andra eftersom de ger samma resultat, men jag är orolig för att detta inte kommer att vara en bra idé om datan skulle ändras.

Mina fynd är:

  • innerText kommer att visa värdet som det är och ignorerar all HTML-formatering som kan vara inkluderad
  • innerHTML kommer att visa värdet och tillämpa eventuell HTML-formatering
  • label verkar vara samma som innerText, så jag kan inte se skillnaden
  • text verkar vara samma som innerText men jQuery:s kortform
  • textContent ser ut att vara samma som innerText men behåller formateringen (såsom \n)
  • outerText verkar vara samma som innerText

Min forskning kan bara ta mig så långt eftersom jag bara kan testa det jag kan komma på eller läsa det som är publicerat, kan någon dock bekräfta om min forskning är korrekt och om det finns något speciellt med label och outerText?

Svar #1

Från MDN:

Internet Explorer introducerade element.innerText. Avsikten är ungefär densamma [som textContent] med ett par skillnader:

  • Observera att medan textContent hämtar innehållet i alla element, inklusive <script> och <style> element, gör den mestadels ekvivalenta IE-specifika egenskapen, innerText, det inte.

  • innerText är också medveten om stil och kommer inte att returnera texten från dolda element, medan textContent kommer att göra det.

  • Eftersom innerText är medveten om CSS-styling kommer det att utlösa en omflöde, medan textContent inte kommer att göra det.

Så innerText kommer inte att inkludera text som är dold av CSS, men textContent kommer att göra det.

innerHTML returnerar HTML som dess namn antyder. Ofta, för att hämta eller skriva text inom ett element, använder människor innerHTML. textContent bör användas istället. Eftersom texten inte tolkas som HTML, är det sannolikt att prestandan blir bättre. Dessutom undviks en XSS-angreppsvektor.

Om du missade det, låt mig upprepa det tydligare: Använd inte .innerHTML om du inte specifikt avser att infoga HTML inom ett element och har vidtagit nödvändiga åtgärder för att säkerställa att HTML:en du infogar inte kan innehålla skadligt innehåll. Om du bara vill infoga text, använd .textContent eller om du behöver stödja IE8 och tidigare, använd funktionsdetektion för att växla mellan .textContent och .innerText.

En huvudorsak till att det finns så många olika egenskaper är att olika webbläsare ursprungligen hade olika namn för dessa egenskaper, och det finns fortfarande inte fullständigt stöd mellan webbläsare för alla. Om du använder jQuery bör du hålla dig till .text() eftersom det är utformat för att jämna ut skillnader mellan webbläsare.*

För några av de andra: outerHTML är i princip samma som innerHTML, förutom att det inkluderar start- och sluttaggarna för det element det tillhör. Jag verkar inte kunna hitta mycket beskrivning av outerText alls. Jag tror att det förmodligen är en obskyr äldre egenskap och bör undvikas.

Svar #2

Tillägg till JLRishes annars utmärkta svar:

Anledningen till att både innerText och outerText finns är för symmetri med innerHTML och outerHTML. Detta blir viktigt när du tilldelar egenskapen.

Anta att du har ett element e med HTML-kod <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 och label ta bort extra mellanslag. Jag fick dessa resultat när jag frågade alternativ i en rullgardinsmeny:

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

Relaterade artiklar