Come ottenere elemento per digitare in javascript

Esistono diversi modi per ottenere o recuperare un elemento in JavaScript, tra cui getElementById () e getElementByClass (). Tuttavia, hai mai pensato di ottenere il tipo di elemento? In tal caso, allora lascia che JavaScript offre i metodi QuerySelectorAll () o getElementsByTagname () che possono essere utilizzati per lo scopo specificato.

Questo articolo spiegherà i metodi per ottenere elementi per tipo in javascript.

Come ottenere elemento per digitare in javascript?

Per ottenere elementi per tipo, utilizzare i seguenti metodi:

• Metodo QuerySelectorall ()
• Metodo getElementsByTagname ()

Dai un'occhiata a ciascuno dei metodi menzionati uno per uno!

Metodo 1: Ottieni elemento per tipo usando il metodo QuerySelectorall ()

"QuerySelectorAll ()"È un metodo del documento predefinito JavaScript che restituisce gli oggetti dell'elemento che corrispondono ai selettori specificati. I metodi QuerySelectorall () e QuerySelector () funzionano allo stesso modo, ma la differenza principale è che il queRySelectorAll () ottiene tutti gli elementi abbinati al selettore mentre il metodo QuerySelector () restituisce solo l'oggetto elemento corrispondente per primo corrispondente.

Sintassi
Segui la sintassi data per l'elemento otter per tipo usando il metodo QuerySelectorall ():

documento.QuerySelectorAll (selettori);

Qui, il "selettore"È il tipo i cui elementi vuoi ottenere ad esempio"ingresso" O "Input [type = text]". Scoprirà tutti gli elementi abbinati al selettore specificato e tornerà al DOM. È possibile passare più selettori separati dalle virgole.

Esempio 1: Ottieni un elemento per tipo
Nel seguente esempio, creeremo un campo di input "testo"Con ID"Nome"E valore"John"E un'intestazione:

Ottieni elemento per tipo = input [type = text]

Inoltre, crea tre tipi di input "Radio"Assegnando ID e valori:

Html

CSS

JavaScript

Quindi, crea un pulsante collegando "al clic"Evento che attiverà il metodo definito dall'utente chiamato"elementgetByType ()":

Clic

In un file JavaScript, prima, chiama il "QuerySelectorAll ()"Metodo passando un selettore"Input [type = text]"Ciò restituirà tutti gli elementi di questo tipo. Quindi, definisci un "elementgetByType ()"Metodo in cui un metodo Alert () stampa il messaggio con il valore del selettore specificato:

var elementTypeSelector = documento.QuerySelectorAll ('input [type = text]');
funzione elementgetByType ()
Avviso ("Il testo del tipo di input dell'elemento HTML contiene" + ElementTypeSelector [0].valore);

L'output viene visualizzato "John"Nel messaggio di allerta che è il valore del tipo di testo del tipo di input:

Esempio 2: Ottieni tutti gli elementi per tipo
Ora, ottieni tutti gli elementi del tipo di input passando "ingresso"Come argomento in"QuerySelectorAll ()" metodo:

var elementTypeSelector = documento.QuerySelectorAll ('Input');

Stampa i valori di "ingresso"Selettore incluso"testo" E "Radio"Su Console:

console.Log (ElementTypeSelector [0].Valore, ElementTypeSelector [1].Valore, ElementTypeSelector [2].Valore, ElementTypeSelector [3].valore);

Produzione

Metodo 2: Ottieni elemento per tipo usando il metodo getElementsByTagname ()

C'è un altro metodo predefinito JavaScript chiamato "getElementsByTagName ()"Ciò restituisce gli oggetti dell'elemento il cui nome tag corrisponde al nome specificato.

Sintassi
Utilizzare la seguente sintassi per utilizzare il metodo getElementByTagName ():

documento.getElementsByTagName (nome);

Qui, "nome"È il tagname di un attributo HTML.

Esempio
In questo esempio, otterremo il valore dell'elemento per tipo usando "getElementsByTagName ()"Metodo, dove passeremo il nome del tag"ingresso"Per ottenere i valori dell'elemento da abbinare al nome del tag specificato e memorizzarlo in una variabile"ElementTypeSelector". Quindi, definisci un "elementgetByType ()"Funzione, in cui il ciclo per iterirà fino alla lunghezza del selettore e controllerà il tipo di selettore; Se è uguale a "radio", chiama il metodo Alert () per stampare i valori dell'elemento radio:

var elementTypeSelector = documento.getElementsByTagName ('Input');
funzione elementgetByType ()
per (let i = 0; i < elementTypeSelector.length; i++)
if (elementTypeSelector [i].type == 'radio')
Avviso ("La radio del tipo di input elemento HTML contiene" + ElementTypeSelector [i].valore);

L'output mostra tutti i valori della radio del tipo di input:

Abbiamo fornito tutte le soluzioni per ottenere elementi per tipo in JavaScript.

Conclusione

Per ottenere gli elementi per tipo, utilizzare i metodi predefiniti JavaScript tra cui il metodo, QuerySelectorall () o il metodo getElementsByTagName (). L'unica differenza tra entrambi è che i getElementsByTagname () hanno ottenuto solo elementi di cui il nome del tag definito corrisponde al tag fornito mentre QuerySelectorAll, che seleziona tutti gli elementi. In questo articolo, abbiamo spiegato i diversi approcci per ottenere elementi per tipo in JavaScript.