2014-06-26 24 views
68

Ho un elenco a discesa che è popolato da Javascript.innerText vs innerHtml vs label vs text vs textContent vs outerText

Mentre decidere quello che dovrebbe essere il valore di default per mostrare il carico, mi sono reso conto che le seguenti proprietà hanno mostrato esattamente gli stessi valori:

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

La mia ricerca mostra test di benchmarking o confronti tra alcuni di essi, ma non tutti.

Posso usare il mio buon senso e scegliere 1 o l'altro in quanto forniscono lo stesso risultato, ma, sono preoccupato che questa non sarà una buona idea se i dati dovessero cambiare.

I miei risultati sono:

  • innerText mostrerà il valore così com'è e ignora qualsiasi formattazione HTML che possono essere inclusi
  • innerHTML mostrerà il valore e applicare qualsiasi formattazione HTML
  • label appare a uguale a innerText, non riesco a vedere la differenza
  • text sembra essere lo stesso di innerText ma la versione stenografica di jQuery
  • textContent sembra lo stesso di innerText ma mantiene la formattazione (come \n)
  • outerText sembra essere lo stesso di innerText

La mia ricerca può avvenire solo a me per quanto posso provare solo quello che può pensare o leggere ciò che è pubblicato, può qualcuno confermare se la mia ricerca è corretta e se c'è qualcosa di speciale su label e outerText?

+11

Uno dei motivi ci sono così tanti modi diversi per accedere al testo a causa delle differenze tra browser. Se stai già usando jQuery, dovresti usare '.text()' per ottenere il contenuto del testo di un elemento, dato che fornirà il massimo supporto per il browser. – JLRishe

+2

https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent#Differences_from_innerText – JLRishe

risposta

58

Da MDN:

Internet Explorer ha introdotto element.innerText. L'intenzione è praticamente la stessa [come textContent] con un paio di differenze:

  • notare che, mentre textContent ottiene il contenuto di tutti gli elementi, tra cui <script> e <style> elementi, la maggior parte equivalente di proprietà IE-specifici, innerText , non.

  • innerText è anche a conoscenza dello stile e non restituirà il testo degli elementi nascosti, mentre textContent lo farà.

  • Poiché innerText è a conoscenza dello stile CSS, attiverà un reflow, mentre textContent non lo farà.

Quindi innerText non includerà il testo che è nascosto dal CSS, ma textContent volontà.

innerHTML restituisce l'HTML come indica il nome. Molto spesso, per recuperare o scrivere testo all'interno di un elemento, le persone usano innerHTML. al suo posto dovrebbe essere usato textContent. Poiché il testo non viene analizzato come HTML, è probabile che abbia prestazioni migliori. Inoltre, questo evita un vettore di attacco XSS.

Un motivo principale per cui esistono così tante proprietà diverse è che i diversi browser in origine avevano nomi diversi per queste proprietà, e non esiste ancora un completo supporto per tutti i browser. Se si utilizza jQuery, è necessario attenersi a .text() poiché è progettato per appianare le differenze tra browser.

Per alcuni degli altri: outerHTML è fondamentalmente lo stesso di innerHTML, tranne che include i tag di inizio e fine dell'elemento a cui appartiene. Non riesco a trovare molte descrizioni di outerText. Penso che sia probabilmente un oscuro patrimonio legacy e dovrebbe essere evitato.

+3

Il problema con il consiglio di quel documento, 'per recuperare o scrivere testo all'interno di un elemento, le persone usano innerHTML. textContent dovrebbe essere usato invece', è che ** textContent ** non è supportato da IE 8, che è ancora in uso abbastanza diffuso perché è la versione in bundle con Windows 7. E FireFox non supporta ** innerText **. Così mentre ** innerHTML ** non è adatto allo scopo, ha una migliore affidabilità cross-browser. –

+5

@AdiInbar Se è necessario supportare i vecchi browser, la cosa corretta da fare è usare il rilevamento delle caratteristiche per passare da ".textContent" a ".innerText", o usare qualcosa come jQuery che appianare queste differenze tra i browser. – JLRishe

+1

Grazie mille per questa spiegazione! Sto usando flot per visualizzare grafici e non è stato mostrato in ff perché ff usa textContent. Innertext era sempre indefinito quando usavo il tickFormatter. – Rainhider

6

un elenco a discesa comprende una collezione di Option oggetti, così si dovrebbe utilizzare la proprietà .text per ispezionare la rappresentazione testuale dell'elemento, cioè

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

Btw,

.text sembra essere lo stesso di .innerText ma la versione stenografica di JQuery

Non è corretto; $(element).text() è la versione jQuery mentre element.text è la versione di accesso proprietà.

4

Addendum alla risposta altrimenti eccellente di JLRishe:

Il motivo innerText e outerText esistono entrambi è la simmetria con innerHTML e outerHTML. Questo diventa importante quando si assegnare alla proprietà.

Supponiamo che hai un elemento e con il codice 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! 
0

textContent non sarà formato (\ n)

Problemi correlati