Ottieni il valore dell'elemento usando JavaScript

A volte, i programmatori vogliono modificare il valore di qualsiasi elemento, quindi devono prima ottenere l'elemento e quindi controllare il valore dell'elemento specificato. Dopo ciò applicare le operazioni ad esse. Per ottenere il riferimento dell'elemento e il suo valore, JavaScript offre alcuni metodi o proprietà predefiniti.

Questo tutorial spiegherà come ottenere il valore di un elemento usando JavaScript.

Come ottenere il valore dell'elemento usando JavaScript?

Per ottenere il valore di un elemento HTML, usa il “valore"Proprietà dell'interfaccia HTMLDataElement.

Per ottenere il riferimento dell'elemento, vengono utilizzati più metodi

• metodo getElementById ()
• Metodo getElementByClass ()
• metodo getElementByTagname ()
• Metodo QuerySelector ()
• Metodo QuerySelectorall ()

Qui, i metodi più comunemente usati con "valore"La proprietà sarà discussa.

Esempio 1: Ottieni valore Elemento utilizzando la proprietà Value con GetElementById ()

Per ottenere il valore dell'elemento, usa il "valore"Proprietà con il"getElementById ()"Metodo per ottenere il riferimento dell'elemento usando il suo assegnato"id".

Innanzitutto, crea un modulo nel file HTML, con un campo di input e un pulsante che mostrerà il valore immesso nel campo di testo sul "clic"Evento:

Ottieni valore del campo di input

Segui le righe di codice indicate di seguito:

funzione getElementValue ()
var value = document.getElementById ("Testo").valore;
avviso (valore);

Nel frammento di codice sopra:

• Innanzitutto, definire una funzione "getElementValue ()".
• Quindi, prendi l'elemento con il suo ID "testo"E recupera il suo valore utilizzando il"valore"Proprietà e archiviarla in una variabile"valore".
• Infine, mostra il valore dell'elemento in un messaggio di avviso.

Produzione

L'output di cui sopra indica che il valore dell'elemento viene recuperato correttamente utilizzando la proprietà del valore con il metodo getElementById ().

Come ottenere il riferimento dell'elemento senza alcun ID specificato? Segui la sezione seguente.

Esempio 2: Ottieni il valore dell'elemento utilizzando la proprietà Value con il metodo QuerySelector ()

Un altro modo per ottenere un riferimento a un elemento per ottenere il suo valore è usare "QuerySelector ()" metodo. Ci vuole un "selettore"Del nome di un elemento come argomento e fornisce il primo elemento del documento che corrisponde al selettore dato.

Qui, prima, crea un menu a discesa utilizzando il tag e un pulsante che attiverà il “getElementValue ()"Funzione per ottenere il valore dell'opzione selezionata:

Seleziona la lingua che vuoi imparare:

Html
CSS
JavaScript
Giava
Pitone



Ottieni valore del campo di input

Nel file JavaScript, utilizzare il seguente codice:

funzione getElementValue ()
var value = document.QuerySelector ("Seleziona").valore;
avviso (valore);

Nelle righe di codice sopra:

• Definire una funzione "getElementValue ()".
• Quindi, chiama il "QuerySelector ()"Metodo passando un selettore"Selezionare"Elemento con il"valore"Proprietà, che ottiene il valore selezionato del menu a discesa.
• Infine, mostra il valore selezionato dell'elemento in un messaggio di avviso.

L'output visualizza i valori selezionati in un messaggio di avviso:

Conclusione

Per ottenere il valore dell'elemento del DOM, usa il "valore"Proprietà dell'interfaccia HTMLDataElement con diversi metodi per ottenere riferimento dell'elemento, come"getElementById ()" metodo, "getElementByClass ()Metodo ", o"QuerySelector ()" metodo. Questo tutorial ha spiegato la procedura per ottenere il valore dell'elemento usando JavaScript.