Quais são as diferenças entre innerText e textContent?

Em JavaScript, as propriedades innerText e textContent são usadas para obter e definir o conteúdo de texto de um elemento HTML. Porém, existem algumas diferenças importantes entre elas, das quais vamos destacar em três tópicos:

Conteúdo renderizado

O innerText retorna apenas o conteúdo de texto visível no elemento, removendo qualquer texto oculto por estilos CSS, como elementos com display: none ou que estejam fora do viewport. Além disso, ele respeita as quebras de linha e espaçamentos, aplicando a formatação como exibida na página.

O textContent retorna todo o conteúdo de texto do elemento, incluindo o texto oculto por estilos CSS. Ele não considera a formatação visual, retornando apenas o texto puro, sem levar em conta quebras de linha ou espaços adicionais.

Desempenho

O innerText como considera a renderização visual, o uso de innerText pode ser mais custoso em termos de desempenho, pois requer cálculos adicionais para determinar o que é visível e o que não é. O textContent por não levar em conta a renderização visual, o textContent tende a ser mais rápido e eficiente em termos de desempenho.

Compatibilidade

O innerText é uma propriedade não padronizada e foi inicialmente implementada pelo Internet Explorer. No entanto, devido à sua popularidade, a maioria dos navegadores modernos oferece suporte a ela.

O textContent é uma propriedade padronizada pela especificação DOM Level 3 e tem um amplo suporte em todos os principais navegadores.

Conclusão

Em resumo, se você está interessado apenas no texto visível e formatado, o innerText é a melhor opção. Por outro lado, se você precisa acessar todo o conteúdo de texto, incluindo o texto oculto e sem formatação, o textContent é a escolha adequada. Além disso, em termos de desempenho, o textContent é geralmente mais eficiente.