Como saber quando devo utilizar ".value", ".innerText" ou "textContent", para alterar o valor do texto do elemento?
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!
Solucionado
Como saber quando devo utilizar ".value", ".innerText" ou "textContent", para alterar o valor do texto do elemento?
Oii, Viviane. Tudo bem?
Boa pergunta! Vamos dar uma olhada em cada um deles:
.value:
<input>, <textarea>, <select>. Serve para obter ou definir o valor que está dentro desses elementos.// Para obter o valor de um input
let inputValue = document.querySelector('input').value;
// Para definir o valor de um input
document.querySelector('input').value = 'Novo valor';
.innerText:
// Para obter o texto visível de um parágrafo
let textoVisivel = document.querySelector('p').innerText;
// Para definir o texto visível de um parágrafo
document.querySelector('p').innerText = 'Novo texto visível';
.textContent:
// Para obter o texto de um parágrafo
let textoCompleto = document.querySelector('p').textContent;
// Para definir o texto de um parágrafo
document.querySelector('p').textContent = 'Novo texto completo';
Quando usar cada um?
.value quando estiver lidando com elementos de formulário e precisar obter ou definir o valor inserido pelo usuário..innerText quando quiser manipular o texto visível de um elemento, respeitando o estilo CSS aplicado..textContent quando precisar obter ou definir todo o texto de um elemento, independentemente de estar visível ou não.Espero ter ajudado.
Um abraço e bons estudos.