textContent vs innerText: qual usar?

innerText e textContent são duas propriedades comumente usadas em JavaScript para acessar o conteúdo de texto dos elementos . Embora ambas as propriedades compartilhem funcionalidades semelhantes, existem diferenças importantes que determinam o caso de uso apropriado para cada uma.

innerText

innerText retorna o texto visível contido em um elemento HTML. Ele exclui quaisquer elementos ocultos ou elementos com estilos de exibição definidos como 'none'.

Exemplo:

Hello 

innerText retornaria 'Hello' para este elemento.

textContent

textContent, por outro lado, retorna o conteúdo de texto completo, independentemente da visibilidade ou dos estilos de exibição. No exemplo acima, textContent retornaria 'Hello World'.

Principais diferenças:

• Conformidade padrão: innerText não era -propriedade padrão, enquanto textContent é uma propriedade padronizada.
• Desempenho: innerText requer informações de layout para determinar o texto visível, tornando-o mais com desempenho intensivo do que textContent.
• Escopo: innerText está disponível apenas para objetos HTMLElement, enquanto textContent pode ser usado com todos os objetos Node.

Considerações de uso:

Para casos em que você deseja acessar apenas o texto visível, innerText pode ser uma escolha mais eficiente. No entanto, se você precisar recuperar todo o conteúdo do texto, no exemplo fornecido, textContent é a propriedade preferida.

No exemplo fornecido:

var logo$ = document.getElementsByClassName('logo')[0];
logo$.textContent = "Example";

Você pode usar textContent para atualizar o conteúdo de texto do elemento de logotipo. Ele substituirá qualquer texto existente por "Exemplo".