Obtener valor de elemento usando JavaScript

A veces, los programadores quieren cambiar el valor de cualquier elemento, por lo que primero necesitan obtener el elemento y luego, verifique el valor del elemento especificado. Después de eso, aplique las operaciones a ellos. Para obtener la referencia del elemento y su valor, JavaScript ofrece algunos métodos o propiedades predefinidas.

Este tutorial explicará cómo obtener el valor de un elemento usando JavaScript.

Cómo obtener el valor del elemento usando JavaScript?

Para obtener el valor de un elemento HTML, use el "valor"Propiedad de la interfaz htmldataelement.

Para obtener referencia del elemento, se utilizan múltiples métodos

• método getElementById ()
• método getElementByClass ()
• método getElementBytagName ()
• método QuerySelector ()
• método QuerySelectorAll ()

Aquí, los métodos más utilizados con el "valorSe discutirá la propiedad.

Ejemplo 1: Obtener valor de elemento usando la propiedad Value con el método GetElementById ()

Para obtener el valor del elemento, use el "valor"Propiedad con el"getElementById ()"Método para obtener la referencia del elemento utilizando su asignado"identificación".

Primero, cree un formulario en el archivo HTML, con un campo de entrada y un botón que mostrará el valor ingresado en el campo de texto en el "hacer clic" evento:

Obtener valor del campo de entrada

Siga las siguientes líneas de código:

función getElementValue ()
valor var = documento.getElementById ("texto").valor;
alerta (valor);

En el fragmento de código anterior:

• Primero, defina una función "getElementValue ()".
• Luego, busque el elemento con su identificación "texto"Y recupere su valor utilizando el"valor"Propiedad y guárdela en una variable"valor".
• Finalmente, muestre el valor del elemento en un mensaje de alerta.

Producción

La salida anterior indica que el valor del elemento se obtiene correctamente utilizando la propiedad de valor con el método getElementById ().

Cómo obtener la referencia del elemento sin ninguna ID especificada? Sigue la sección a continuación.

Ejemplo 2: Obtener valor de elemento usando la propiedad Value con el método QuerySelector ()

Otra forma de obtener una referencia a un elemento para obtener su valor es usar el "QuerySelector ()" método. Toma un "selector"Del nombre de un elemento como argumento y da el primer elemento del documento que coincide con el selector dado.

Aquí, primero, cree un menú desplegable con el etiqueta y un botón que activará el "getElementValue ()"Función para obtener el valor de la opción seleccionada:

Seleccione el idioma que desea aprender:

Html
CSS
Javascript
Java
Pitón



Obtener valor del campo de entrada

En el archivo JavaScript, use el siguiente código:

función getElementValue ()
valor var = documento.QuerySelector ("Seleccionar").valor;
alerta (valor);

En las líneas de código anteriores:

• Defina una función "getElementValue ()".
• Entonces, llame al "QuerySelector ()"Método al pasar un selector"seleccionar"Elemento con el"valor"Propiedad, eso obtiene el valor seleccionado del menú desplegable.
• Por último, muestre el valor seleccionado del elemento en un mensaje de alerta.

La salida muestra los valores seleccionados en un mensaje de alerta:

Conclusión

Para obtener el valor del elemento de DOM, use el "valor"Propiedad de la interfaz htmldataelement con diferentes métodos para obtener referencia del elemento, como"getElementById ()" método, "getElementByClass ()Método "o el"QuerySelector ()" método. Este tutorial explicó el procedimiento para obtener el valor del elemento usando JavaScript.