nodeValue vs innerHTML e textContent. Come scegliere?

Sto usando js semplice per modificare il testo interno di un elemento etichetta, e non ero sicuro su quali motivi dovrei usare innerHTML o nodeValue o textContent. Non ho bisogno di creare un nuovo nodo o modificare gli elementi HTML o altro: basta sostituire il testo. Ecco un esempio del codice:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

Ho esaminato la fonte jQuery e utilizza nodeValue esattamente una volta, ma innerHTML e textContent più volte. Quindi ho trovato questo test jsperf che indica che firstChild.nodeValue è significativamente più veloce. Almeno questo è ciò che interpreto nel senso.

Se firstChild.nodeValue è molto più veloce, qual è il problema? Non è ampiamente supportato? C'è qualche altro problema?

Differenze tra textContent / innerText / innerHTML su MDN.

E una risposta StackOverflow su innerText / nodeValue.

Sommario

1. innerHTML analizza il contenuto come HTML, quindi richiede più tempo.
2. nodeValue utilizza il testo semplice, non analizza HTML ed è più veloce.
3. textContent utilizza il testo semplice, non analizza HTML ed è più veloce.
4. innerText Prende in considerazione gli stili. Non otterrà il testo nascosto per esempio.

innerTextnon esisteva in firefox fino a FireFox 45 secondo caniuse ma ora è supportato in tutti i principali browser.

.textContentuscite text/plainmentre .innerHTMLuscite text/html.

Esempio rapido:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

output: <a href="http://google.com"> google </a>

example.innerHTML = '<a href="https://google.com">google</a>';

produzione: google

Puoi vedere dal primo esempio quell'output di tipo text/plain non viene analizzato dal browser e risulta nella visualizzazione del contenuto completo. L'output del tipo text/htmlindica al browser di analizzarlo prima di visualizzarlo.

MDN innerHTML , MDN textContent , MDN nodeValue

I due che conosco bene e con cui lavoro sono innerHTML e textContent .

Uso textContent quando voglio solo cambiare il testo di un paragrafo o un'intestazione in questo modo:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Quindi, textContent cambia solo il testo, ma non analizza HTML, come possiamo vedere dai tag visibili in testo normale nel risultato lì.

Se vogliamo analizzare HTML, usiamo innerHTML in questo modo:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)

em { font-style: italic; }

<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Quindi, questo secondo esempio analizza la stringa assegno per dell'elemento DOM innerHTML proprietà come HTML.

Questo è fantastico e una grande vulnerabilità di sicurezza:)

(cerca XSS se vuoi conoscere la sicurezza per questo)

innerText è approssimativamente quello che se selezionassi il testo e lo copiassi. Gli elementi non renderizzati non sono presenti in innerText.

textContent è una concatenazione dei valori di tutti TextNodes nel sottoalbero. Se reso o no.

Ecco un ottimo post che descrive in dettaglio le differenze

innerHTML non dovrebbe essere incluso in un confronto con innerText o textContent, in quanto è completamente diverso e dovresti davvero sapere perché :-) Cerca separatamente

[Nota: questo post riguarda più la condivisione di dati specifici che potrebbero aiutare qualcuno che dire alle persone cosa fare]

Nel caso qualcuno si stia chiedendo qual è il più veloce oggi: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( per il secondo test, il contenuto dell'intervallo è di testo semplice, i risultati potrebbero cambiare in base al suo contenuto)

Sembra che .innerHtml sia il grande vincitore in termini di pura velocità!

(NOTA: sto parlando solo di velocità qui, potresti voler cercare altri criteri prima di scegliere quale usare!)

Proprietà Element.innerHTML seto getcodice HTML dell'elemento.

Es: Abbiamo un <h1>tag e uno stile forte con esso:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Per get contenuto dell'elemento ha id uguale a "myHeader", faremo lo stesso:

var element = document.getElementById("myHeader");
element.innerHTML

Risultato di ritorno:

<strong>My Header</strong> Normal Text`

Per "impostare" il nuovo contenuto (valore) per questo elemento, il codice sarà qui:

Element.innerHTML = "My Header My Text";

Quindi questa proprietà non funziona solo con il testo normale, ma è finalizzata al passaggio o alla copia del codice HTML.

=> Non dovremmo usarlo.

Tuttavia, molti programmatori (incluso me stesso) utilizzano questo attributo per inserire testo in una pagina Web e questo metodo comporta un rischio potenziale:

1. Operazione errata: l'inserimento di ogni testo a volte elimina tutto l'altro codice HTML dell'elemento inserito.
2. Per motivi di sicurezza: i due esempi sopra riportati sono completamente innocui, anche se l'utilizzo del tag non è ancora un problema poiché lo standard HTML5 ha impedito l'esecuzione della riga di comando all'interno del tag. quando inserito nella pagina Web tramite l'attributo innerHTML. Vedi questa regola qui .

Per questo motivo, innerHTMLsi sconsiglia l'uso di quando si inserisce il testo normale, invece utilizzare textContent. IltextContent proprietà non capirà che il codice che passi è una sintassi HTML, ma solo un testo al 100% non più e non meno.

Il risultato restituisce se si utilizza textContentnell'esempio sopra:

My Header My Text