textContent x innerText | JavaScript: programando na linguagem da web

Olá Hu, tudo bem com você?

O textContent e innerText são duas propriedades do JavaScript que permitem acessar e manipular o conteúdo textual de um elemento HTML. A principal diferença entre elas são a forma como elas lidam com o texto contido em elementos ocultos ou de estilo CSS.

A propriedade textContent retorna todo texto, incluindo o texto dentro de elementos ocultos ou de estilo CSS, enquanto que a propriedade innerText retorna apenas o texto visível em um elemento. Por exemplo, se um elemento tiver um estilo CSS "display:none", que é responsável por deixar oculto um conteúdo HTML que recebe esse estilo, seu conteúdo será coletado quando usamos o textContent, mas não em innerText.

Para testar esse comportamento, podemos criar um projeto que contenha os seguintes arquivos: index.html, index.css e base.js. Crie-os dentro de uma única pasta. Nestes arquivos adicione os seguintes conteúdos de códigos.

index.html

<!DOCTYPE html>
<html lang="pt">
<head>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
    <div id="exemplo">
        <p class='invisivel'>Este é um exemplo de texto que não é exibido no navegador.</p>
    </div>
    <script src="base.js"></script>
</body>
</html>

index.css

.invisivel{
    display: none;
}

base.js

let elemento = document.getElementById("exemplo");
let textoComInnerText = elemento.innerText;
let textoComTextContent = elemento.textContent;
console.log('Resultado do texto coletado com o innerText: ', textoComInnerText);
console.log('Resultado do texto coletado com o textContent: ', textoComTextContent);

Após criar, adicionar os códigos e salvar os arquivos. Abra o arquivo index.html no navegador, será apresentada uma página em branco. Após isso, abra o painel de desenvolvedor pressionando . Em seguida, clique na aba Console e verifique o resultado apresentado, ele deve estar como abaixo.

Resultado do texto coletado com o innerText:  
Resultado do texto coletado com o textContent:  
        Este é um exemplo de texto que não é exibido no navegador.

Note que o resultado da coleta utilizando o innerText é uma string vazia indicando que a propriedade CSS gerou impacto no resultado da coleta. Já na coleta com o textContent foi apresentado o conteúdo do texto.

Na aula queremos que o conteúdo de texto esteja presente na tabela sem que o estilo CSS interfira no resultado da coleta do conteúdo. Para isso, será necessário fazer o uso da propriedade textContent que retorna todo o conteúdo de texto sem que o CSS interfira no resultado.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Espero ter ajudado. Em caso de dúvidas estou à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!