Ottieni tutti gli elementi contenenti una classe con queryyselector
Ci sono molte situazioni in cui gli sviluppatori devono selezionare un gruppo di elementi che condividono proprietà simili. Ad esempio, applicando alcune funzionalità collettive sugli elementi specificati, gli sviluppatori potrebbero dover controllare e ottenere gli elementi che contengono lo stesso nome di classe.
Più specificamente, il recupero degli elementi per nome di classe viene eseguito utilizzando i metodi JavaScript, come "getElementsByClassName () "," QuerySelector () "e" QuerySelectorAll ()"Metodi. IL "QuerySelector ()"Il metodo fornisce solo la prima corrispondenza del selettore dato mentre il "GetElementsByClassName () e" QuerySelectorAll () " Metodi restituire una serie di elementi che corrispondono al nome di classe particolare.
Questo tutorial descriverà il modo per recuperare tutti gli elementi che contengono la stessa classe usando QuerySelector.
Come ottenere tutti gli elementi contenenti una classe con queryyselector?
Il selettore di query fornisce solo la prima istanza che corrisponde al nome della classe. Per ottenere tutti gli elementi, utilizzare il “QuerySelectorAll ()" metodo. Restituisce un gruppo di tutti gli elementi che corrispondono al selettore specificato, come un particolare nome di classe.
Esempio 1: Ottieni tutti gli elementi contenenti una classe con metodo QuerySelector ()
Crea pulsanti e assegna un “btn"Classe per modellarli:
Ora, ottieni tutti gli elementi dei pulsanti utilizzando un nome di classe specificato con l'aiuto di "QuerySelector ()" metodo:
console.registro (documento.QuerySelector ('.btn '));L'output indica che è stato recuperato solo l'elemento del primo pulsante utilizzando il metodo QuerySelector ():
Vediamo cosa succederà quando proviamo a modellare i pulsanti usando il metodo QuerySelector ().
Innanzitutto, memorizzare i riferimenti di tutti i pulsanti nella variabile "pulsante":
Var Button = Document.QuerySelector ('.btn ');Ora, applica il colore di sfondo per tutti i pulsanti usando "stile" proprietà:
pulsante.stile.backgroundColor = "grigio";Come puoi vedere nell'output, il colore viene applicato solo sul primo pulsante:
Esempio 2: Ottieni tutti gli elementi contenenti una classe con metodo QuerySelectorall ()
IL "QuerySelectorAll ()"Il metodo fornisce l'elenco degli elementi corrispondenti al selettore particolare:
console.registro (documento.QuerySelectorall ('.btn '));Produzione
Ottieni tutti i pulsanti usando "QuerySelectorAll ()"Metodo passando il nome della classe per modellarli:
Var Button = Document.QuerySelectorall ('.btn ');Per lo styling Elenco di elementi, utilizzare l'approccio per loop per iterare ogni nodo e impostare il colore di sfondo "grigio":
per (let i = 0; i < button.length; i++)Button [i].stile.backgroundColor = "grigio";
Si può vedere che tutti i pulsanti sono stati disegnati con successo:
Abbiamo compilato tutte le informazioni pertinenti relative all'ottenimento di elementi che contengono la stessa classe con QuerySelector.
Conclusione
Per ottenere tutti gli elementi della stessa classe, utilizzare il "QuerySelectorAll ()Metodo "Invece di"QuerySelector ()". Perché fornisce solo la prima istanza o elemento che contiene il nome di classe particolare. Questo tutorial ha descritto il modo per recuperare tutti gli elementi HTML che contiene lo stesso nome di classe.