nodeValue vs innerHTML e textContent. Como escolher?

Estou usando js simples para alterar o texto interno de um elemento label e não sabia ao certo por que razão deveria usar innerHTML ou nodeValue ou textContent. Não preciso criar um novo nó ou alterar os elementos HTML ou algo assim - basta substituir o texto. Aqui está um exemplo do código:

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.

Procurei na fonte jQuery e ela usa nodeValue exatamente uma vez, mas innerHTML e textContent várias vezes. Então eu encontrei este teste jsperf que indica que o firstChild.nodeValue é significativamente mais rápido. Pelo menos é o que eu interpreto como significando.

Se firstChild.nodeValue é muito mais rápido, qual é o problema? Não é amplamente suportado? Existe algum outro problema?

Diferenças entre textContent / innerText / innerHTML no MDN.

E uma resposta do Stackoverflow sobre innerText / nodeValue.

Resumo

1. innerHTML analisa o conteúdo como HTML, por isso leva mais tempo.
2. nodeValue usa texto direto, não analisa HTML e é mais rápido.
3. textContent usa texto direto, não analisa HTML e é mais rápido.
4. innerText Leva em consideração os estilos. Não receberá texto oculto, por exemplo.

innerTextnão existia no firefox até o FireFox 45, de acordo com o caniuse, mas agora é suportado nos principais navegadores.

.textContentsaídas text/plainenquanto .innerHTMLsaídastext/html .

Exemplo rápido:

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

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

saída: <a href="http://google.com"> google </a>

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

saída: google

Você pode ver no primeiro exemplo que a saída do tipo text/plainnão é analisada pelo navegador e resulta na exibição completa do conteúdo. A saída do tipo text/htmlinforma ao navegador para analisá-lo antes de exibi-lo.

MDN innerHTML , MDN textContent , MDN nodeValue

Os dois que eu conheço bem e trabalho são innerHTML e textContent .

Uso textContent quando só quero alterar o texto de um parágrafo ou cabeçalho da seguinte maneira:

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>

Então, textContent apenas altera o texto, mas não analisa HTML, como podemos ver pelas tags visíveis em texto sem formatação no resultado.

Se queremos analisar o HTML, usamos o innerHTML assim:

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>

Portanto, esse segundo exemplo analisa a string que atribuo ao innerHTML do elemento DOM propriedade como HTML.

Isso é incrível e uma grande vulnerabilidade de segurança:)

(procure XSS se quiser saber sobre segurança para isso)

innerText é aproximadamente o que você obteria se você selecionasse o texto e o copiasse. Elementos que não são renderizados não estão presentes no innerText.

textContent é uma concatenação dos valores de todos TextNodes na subárvore. Seja renderizado ou não.

Aqui está um ótimo post detalhando as diferenças

innerHTML não deve ser incluído em uma comparação com innerText ou textContent, pois é totalmente diferente e você realmente deve saber por que :-) Pesquise separadamente

[Nota: esta postagem é mais sobre o compartilhamento de dados específicos que podem ajudar alguém do que dizer às pessoas o que fazer]

Caso alguém esteja se perguntando o que é mais rápido hoje: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( para o segundo teste, o conteúdo do período é texto sem formatação, os resultados podem mudar de acordo com o conteúdo)

Parece que .innerHtmlé o grande vencedor em termos de velocidade pura!

(NOTA: Estou falando apenas de velocidade aqui; convém procurar outros critérios antes de escolher qual usar!)

Element.innerHTML propriedade para set, ou getcódigo HTML do elemento.

Ex: Temos uma <h1>tag e um estilo forte:

<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1> Para o getconteúdo do elemento com id igual a "myHeader", faremos o mesmo:

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

Resultado de retorno:

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

Para "definir" novo conteúdo (valor) para esse elemento, o código estará aqui:

Element.innerHTML = "My Header My Text";

Portanto, essa propriedade não funciona apenas com texto sem formatação, mas visa passar ou copiar o código HTML.

=> Não devemos usá-lo.

No entanto, muitos programadores (inclusive eu) usam esse atributo para inserir texto em uma página da Web, e esse método apresenta um risco potencial:

1. Operação incorreta: a inserção de cada texto apenas algumas vezes exclui todos os outros códigos HTML do elemento inserido.
2. Por segurança: é claro, os dois exemplos acima são completamente inofensivos, mesmo que o uso da tag ainda não seja um problema, porque o padrão HTML5 impediu a execução da linha de comando dentro da tag. quando inserido na página da web por meio do atributo innerHTML. Veja esta regra aqui .

Por esse motivo, o uso innerHTMLnão é recomendado ao inserir texto sem formatação. Em vez disso, use textContent. A textContentpropriedade não entenderá que o código que você passa é uma sintaxe HTML, mas apenas um texto 100% nem mais nem menos.

O resultado retornará se estiver sendo usado textContentno exemplo acima:

My Header My Text