Há alguma diferença entre innerText e textContent ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Há alguma diferença entre innerText e textContent ?
A propriedade innerText ao ler o conteúdo de um elemento irá retorná-lo como ele aparece na tela. Se o texto estiver oculto por estilização com CSS (por exemplo: display: none;) ele não será incluído. Ou seja, deve ser usada quando a estilização deve ser levada em consideração.
Já a propriedade textContent irá ler o texto como ele está escrito na marcação, não levando em consideração a estilização. Ela retorna todo o texto, independentemente dele estar sendo renderizado na tela ou não.
O trecho de código abaixo (que eu peguei de uma resposta no Stack Overflow) pode demonstrar a diferença:
<span>Hello <span style="display: none;">World</span></span>
Aqui innerText irá retornar 'Hello ', enquanto que textContent irá retornar 'Hello World'.
Comprovei no devtools
<header class="app__header">
<span>Hello
<span style="display: none;">World</span>
<div>Mais texto</div>
</span>
<figure class="app__logo-figure">
<img class="app__logo-image" src="/imagens/logo.png" alt="">
</figure>
</header>
Teste no devtools:
const elemento = document.querySelector('.app__header span'); undefined
console.log(elemento.innerText) VM11788:1 Hello Mais texto undefined
console.log(elemento.textContent) VM11798:1 Hello World Mais texto
Ótimo! Legal você ter testado! Acho que agora não ficou mais nenhuma dúvida, certo?