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?
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?
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!