Olá , na aula Busca de Dados do paciente , usa-se textContent e não innerText. Não se usa innerHTML porque esta propriedade inclui os marcadores HTML. Qual a diferença entre textContent e innerText e porque a escolha de usar textContent ? Obrigado
Solucionado
Olá , na aula Busca de Dados do paciente , usa-se textContent e não innerText. Não se usa innerHTML porque esta propriedade inclui os marcadores HTML. Qual a diferença entre textContent e innerText e porque a escolha de usar textContent ? Obrigado
hoje, com a Alura e o Google Gemini
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!
Tudo bem Felippe ?
Parabéns , sua resposta foi uma verdadeira aula !
Obrigado