1
resposta

[Dúvida] Qual a diferença?

Olá, qual a diferença do innerText para o textContent e em quais situações devo utilizar ambos? Visto que os dois vão imprimir o texto na tela?

1 resposta

Olá, Rafaela! Sua pergunta é muito pertinente, pois realmente innerText e textContent podem parecer semelhantes à primeira vista. No entanto, eles têm diferenças sutis que podem afetar o comportamento do seu código.

Ambos são usados para obter ou definir o conteúdo de texto de um nó especificado ou de todos os nós descendentes. Porém, a principal diferença entre os dois reside na maneira como eles lidam com a formatação do HTML.

O textContent retorna todo o conteúdo de texto de um nó e seus descendentes, sem levar em consideração o estilo ou a formatação do HTML. Ele ignora completamente as tags HTML e retorna apenas o texto puro. Isso significa que, se você tentar inserir uma tag HTML usando textContent, a tag será tratada como texto puro, e não como HTML.

Por outro lado, innerText leva em consideração o estilo e a formatação do HTML. Ele retorna apenas o texto visível, ou seja, se algum texto estiver oculto devido ao estilo CSS, ele não será retornado. Além disso, ao contrário do textContent, se você tentar inserir uma tag HTML usando innerText, a tag será interpretada como HTML e não como texto.

Agora, em relação a quando usar cada um, depende do que você deseja alcançar. Se você deseja obter ou definir o texto, independentemente do estilo ou formatação do HTML, use textContent. No entanto, se o estilo e a formatação do HTML são importantes para você, use innerText.

Por exemplo, no seu curso, a instrução iniciarOuPausarBt.textContent = "Pausar" está sendo usada para alterar o texto do botão de "Começar" para "Pausar". Neste caso, como não estamos preocupados com a formatação do HTML, textContent é a escolha apropriada.

Espero ter ajudado e bons estudos!