Como manipular valor Html com Javascript

Neste tutorial mostro como setar ou pegar valor de um elemento Html com Javascript.

Introdução

Este será um tutorial onde tentarei explicar de uma forma simples e prática como podemos manipular o  valor de um elemento Html utilizando o  Javascript .

Conhecer está funcionalidade do Javascript é essencial para todo programador Frontend, pois só assim conseguiremos exibir as informações para o usuário e obter os inputs do usuário em uma página Html.

Neste tutorial irei abordar três funcionalidades do Javascript , irei mostrar como pegar um componente usando o método (getElementById). 

Além de demonstrar como obter o valor de um elemento e como setar o valor para este elemento.

Como manipular valor Html com Javascript

Para setarmos o valor em um elemento Html, a primeira coisa que devemos fazer é pegar a referência do elemento a qual queremos manipular, para isso utilizamos a função getElementById(idDoElemento) e passando como parâmetro o id do elemento.

Após defirnirmos a referência do elemento que queremos manipular, já podemos atribuir um valor a esse elemento.

Neste primeiro exemplo vamos utilizar um elemento do tipo texto exemplo uma ((divs, labels, etc..) para definir o valor destes elementos utilizamos o atributo textContent

E para o segundo exemplo que é um elemento do tipo (input) usaremos o atributo value para definirmos o valor deste elemento.

Logo abaixo demonstro um exemplo de como atribuir um valor para cada tipo elemento Html, que mencionei acima:

## Seta valor em inputs
document.getElementById(idItemValUnitario).value = 15;

## Seta o valor em outros elementos html
document.getElementById(idItemValTotal).textContent = "15";

Como obter o valor de um elemento html

Para obtermos o valor de um elemento html como no exemplo acima devemos definir a referência do elemento que queremos manipular.

No primeiro caso obteremos o valor de um elemento do tipo (input)  para obter o valor desse tipo de elemento devemos utilizar o atributo value .

E para os elementos do tipo (text)  como (divs, labels, etc..) usaremos o atributo innerText para pegar o valor destes elementos.

Com base na explicação acima demonstro um exemplo de código que podemos utilizar  para obtermos o valor de um elemento Html:

## Obtém valor em inputs
let valor =  document.getElementById(idItemValUnitario).value;

## Obtém o valor de outros elementos html
let valor = document.getElementById(idItemValTotal).innerText;

Referências:

• Guia do Desenvolvedor