innerText vs innerHTML vs label vs text vs textContent vs outerText

Ho un elenco a discesa che è popolato da Javascript.

Decidendo quale dovrebbe essere il valore predefinito da mostrare al caricamento, mi sono reso conto che le seguenti proprietà mostravano esattamente gli stessi valori:

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

La mia ricerca mostra prove 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 sia una buona idea se i dati dovessero cambiare.

Le mie scoperte sono:

• innerText mostrerà il valore così com'è e ignora qualsiasi formattazione HTML che può essere inclusa
• innerHTML mostrerà il valore e applicherà qualsiasi formattazione HTML
• labelsembra essere lo stesso di innerText, quindi non riesco a vedere la differenza
• textsembra essere lo stesso innerTextdella versione abbreviata di jQuery
• textContentsembra uguale innerTextma mantiene la formattazione (come \n)
• outerText sembra essere lo stesso di innerText

La mia ricerca può portarmi solo fino a quando posso solo testare ciò che posso pensare o leggere ciò che è pubblicato, qualcuno può confermare se la mia ricerca è corretta e se c'è qualcosa di speciale in labele outerText?

Da MDN :

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

• Si noti che mentre textContent ottiene il contenuto di tutti gli elementi, inclusi <script>ed <style>elementi, la proprietà specifica IE per lo più equivalente, innerText, non lo fa.

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

• Poiché innerText è a conoscenza dello stile CSS, attiverà un riflusso, mentre textContent no.

Quindi innerTextnon includerà il testo nascosto dai CSS, ma lo textContentfarà.

innerHTML restituisce l'HTML come indica il nome. Abbastanza spesso, al fine di recuperare o scrivere testo all'interno di un elemento, le persone usano innerHTML. In alternativa, si dovrebbe usare textContent. Poiché il testo non viene analizzato come HTML, è probabile che abbia prestazioni migliori. Inoltre, questo evita un vettore di attacco XSS.

Nel caso in cui vi siete persi che, ripeto più chiaramente: Do Non utilizzare .innerHTMLa meno che non specificatamente intenzione di inserto HTML all'interno di un elemento ed hanno preso le precauzioni necessarie per garantire che il codice HTML si sta inserendo non può contenere contenuti dannosi. Se si desidera solo inserire testo, utilizzare .textContento se è necessario supportare IE8 e versioni precedenti, utilizzare il rilevamento delle funzionalità per disattivare tra .textContente .innerText.

Uno dei motivi principali per cui ci sono così tante proprietà diverse è che i diversi browser originariamente avevano nomi diversi per queste proprietà e non esiste ancora un supporto cross-browser completo per tutte. Se si utilizza jQuery, è necessario attenersi a ciò .text()poiché è progettato per appianare le differenze tra browser. *

Per alcuni degli altri: outerHTMLè sostanzialmente lo stesso innerHTML, tranne per il fatto che include i tag di inizio e fine dell'elemento a cui appartiene. Non riesco a trovare molta descrizione outerText. Penso che sia probabilmente una proprietà ereditata oscura e dovrebbe essere evitata.

Un elenco a discesa comprende una raccolta di Optionoggetti, pertanto è necessario utilizzare la .textproprietà per ispezionare la rappresentazione testuale dell'elemento, ad es

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

btw,

.textsembra essere lo stesso .innerTextdella versione abbreviata di JQuery

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

Addendum alla risposta altrimenti eccellente di JLRishe:

Il motivo per cui esistono sia InternalText e outerText è per la simmetria con innerHTML e outerHTML. Questo diventa importante quando si assegna alla proprietà.

Supponiamo di avere un elemento econ 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!

textContent non formatterà (\ n)

Consulta la compatibilità dei browser http://www.quirksmode.org/dom/html/ se scegli come target browser specifici. Perché sembra che tutti abbiano il loro modo di fare le cose. Ecco perché è meglio usare JQuery .text () ( http://api.jquery.com/text/ ) se non si desidera giocherellare.

texte labelrimuovere gli spazi extra. Ho ottenuto questi risultati durante la query delle opzioni in un menu a discesa:

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