value x innerText x textContent

Oii, Viviane. Tudo bem?

Boa pergunta! Vamos dar uma olhada em cada um deles:

1. .value:

   • Usado principalmente em elementos de formulário, como <input>, <textarea>, <select>. Serve para obter ou definir o valor que está dentro desses elementos.
   • Exemplo:

     // 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';
     

2. .innerText:

   • Usado para obter ou definir o texto visível de um elemento. Respeita o estilo CSS.
   • Exemplo:

     // 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';
     

3. .textContent:

   • Usado para obter ou definir o texto de um elemento. Inclui todo o texto, mesmo que esteja escondido por CSS.
   • Exemplo:

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

• Use .value quando estiver lidando com elementos de formulário e precisar obter ou definir o valor inserido pelo usuário.
• Use .innerText quando quiser manipular o texto visível de um elemento, respeitando o estilo CSS aplicado.
• Use .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.