Obtenha o valor do elemento usando JavaScript

Às vezes, os programadores querem alterar o valor de qualquer elemento, então precisam primeiro obter o elemento e, em seguida, verifique o valor do elemento especificado. Depois disso, aplique as operações a eles. Para obter a referência do elemento e seu valor, o JavaScript oferece alguns métodos ou propriedades predefinidas.

Este tutorial explicará como obter o valor de um elemento usando JavaScript.

Como obter o valor do elemento usando JavaScript?

Para obter o valor de um elemento HTML, use o “valorPropriedade da interface HtmldataElement.

Para obter referência do elemento, vários métodos são usados

• getElementById () método
• getElementByClass () método
• GetElementByTagName () Método
• Método querySelector ()
• método querySelectorAll ()

Aqui, os métodos mais usados ​​com o “valor”A propriedade será discutida.

Exemplo 1: Obtenha o valor do elemento usando a propriedade Value com o método getElementById ()

Para obter o valor do elemento, use o “valor”Propriedade com a“getElementById ()”Método para obter a referência do elemento usando o seu atribuído“eu ia”.

Primeiro, crie um formulário no arquivo HTML, com um campo de entrada e um botão que mostrará o valor inserido no campo de texto no “cliqueEvento:

Obter valor do campo de entrada

Siga as linhas de código abaixo dadas:

function getElementValue ()
Value var = documento.getElementById ("texto").valor;
alerta (valor);

No trecho de código acima:

• Primeiro, defina uma função “getElementValue ()”.
• Então, busque o elemento com seu id “texto”E recuperar seu valor utilizando o“valor”Propriedade e armazene -a em uma variável“valor”.
• Finalmente, mostre o valor do elemento em uma mensagem de alerta.

Saída

A saída acima indica que o valor do elemento é buscado com sucesso usando a propriedade Value com o método getElementById ().

Como obter a referência do elemento sem nenhum ID especificado? Siga a seção abaixo.

Exemplo 2: Obtenha o valor do elemento usando a propriedade Value com o método querySelector ()

Outra maneira de obter uma referência a um elemento para obter seu valor é usar o “QuerySelector ()”Método. É preciso um “Seletor”Do nome de um elemento como um argumento e fornece o primeiro elemento do documento que corresponde ao seletor fornecido.

Aqui, primeiro, crie um menu suspenso usando o tag e um botão que acionará o “getElementValue ()”Função para obter o valor da opção selecionada:

Selecione o idioma que deseja aprender:

Html
CSS
JavaScript
Java
Pitão



Obter valor do campo de entrada

No arquivo JavaScript, use o seguinte código:

function getElementValue ()
Value var = documento.QuerySelector ("Selecionar").valor;
alerta (valor);

Nas linhas acima do código:

• Defina uma função “getElementValue ()”.
• Então, chame o “QuerySelector ()”Método passando um seletor“Selecione”Elemento com o“valor”Propriedade, que recebe o valor selecionado do menu suspenso.
• Por fim, mostre o valor selecionado do elemento em uma mensagem de alerta.

A saída exibe os valores selecionados em uma mensagem de alerta:

Conclusão

Para obter o valor do elemento DOM, use o “valor”Propriedade da interface htmldataElement com diferentes métodos para obter referência do elemento, como“getElementById ()”Método,“getElementbyclass ()”Método, ou o“QuerySelector ()”Método. Este tutorial explicou o procedimento para obter o valor do elemento usando JavaScript.