Quali sono i diversi modi per selezionare elementi DOM in JavaScript

Mentre lavorano con JavaScript, gli sviluppatori potrebbero aver bisogno di selezionare elementi DOM per scopi diversi. Ad esempio, modificare il contenuto o lo styling della pagina Web, rispondere agli eventi utente, accedere ai dati sulle pagine Web e così via. In breve, selezionare e manipolare gli elementi DOM con JavaScript è essenziale per creare pagine Web dinamiche e interattive.

Questo tutorial dimostrerà i diversi metodi per la selezione degli elementi DOM in JavaScript.

Quali sono i diversi modi per selezionare elementi DOM in JavaScript?

Utilizzare i seguenti metodi per selezionare elementi DOM in JavaScript:

• metodo getElementById ()
• Metodo getElementsByClassName ()
• Metodo getElementsByTagname ()
• Metodo QuerySelector ()
• Metodo QuerySelectorall ()

Metodo 1: selezionare Elementi DOM usando il metodo "getElementById ()"

Per la selezione degli elementi DOM utilizzare il “getElementById ()"Metodo basato sull'ID assegnato dell'elemento. Questo metodo seleziona un singolo elemento per il suo unico "id"Attributo. Fornisce un riferimento all'elemento con l'ID e i restituzioni specificati "nullo"Se non viene trovato alcun elemento corrispondente.

Sintassi

Utilizzare la sintassi di seguito per il metodo getElementById ():

documento.getElementById ("idname")

Qui, il "idname"È il nome di un attributo ID assegnato a un elemento.

Esempio

In un file HTML, crea due titoli in un elemento Div usando "H4"Tag. Assegna ID all'elemento Div e intestazioni "H4" elementi chiamati "div" E "intestazione"Rispettivamente. Aggiungi l'attributo di stile all'elemento Div per allinearlo al centro. Inoltre, assegna una classe "sezione"Alla seconda voce che cambia il suo colore:

Accedi ad elementi DOM utilizzando metodi diversi

Seleziona DOM Elements in JavaScript usando il metodo 'getElementById ()'

Ora otterremo il "div"Elemento usando il suo ID assegnato con l'aiuto di"getElementById ()" metodo:

var getbyid = documento.getElementById ("div");

Stampa l'elemento contro l'ID "div"Sulla console:

console.registro (getbyid);

Si può vedere che l'elemento HTML richiesto è stato recuperato con successo:

Metodo 2: selezionare DOM Elements utilizzando il metodo "getElementsByClassName ()"

Puoi anche selezionare l'elemento DOM utilizzando la sua classe assegnata con l'aiuto di "getElementsByClassName ()" metodo. Seleziona un elenco di elementi con il nome della loro classe. Emette un oggetto HTMLCollection live, un oggetto simile a un array che contiene tutti gli elementi con il nome della classe specificato.

Sintassi

La seguente sintassi è utilizzata per il metodo "getElementsByClassName ()":

documento.getElementsByClassName ("ClassName")

Esempio

Qui otterremo l'elemento che contiene la classe "sezione"E stampa sulla console:

var getbyClass = documento.getElementsByClassName ("sezione");
console.log (getbyclass);

Come puoi vedere nell'uscita, un array di lunghezza 1 restituito che contiene un elemento "H4"Chi appartiene alla classe"sezione":

Metodo 3: selezionare DOM Elements usando il metodo "getElementsByTagname ()"

Nel caso in cui non vi sia alcun ID o classe assegnato a un elemento, usa il "getElementsByTagName ()"Metodo per ottenere l'elemento con il nome del tag. Restituisce anche un oggetto HTMLCollection live, che è un oggetto simile a un array che contiene tutti gli elementi che hanno il nome del tag specificato.

Sintassi

Segui la sintassi data per la selezione di elementi in base al nome del tag:

getElementsByTagName (TagName)

Esempio

Invoca il metodo "getElementsByTagname ()" passando il nome del tag "H4". Quindi, stampare l'elenco di elementi che corrisponde al nome del tag specificato sulla console:

var getbytag = documento.getElementsByTagName ("H4");
console.log (getbytag);

Produzione

Metodo 4: selezionare Elementi DOM usando il metodo "QuerySelector ()"

Usa il "QuerySelector ()"Metodo per ottenere l'elemento DOM. Seleziona un singolo elemento che corrisponde a un selettore CSS specificato. Restituisce il primo elemento corrispondente trovato nel documento. Se non viene abbinato alcun elemento, dà "nullo".

Sintassi

La sintassi di seguito viene utilizzata per il metodo "QuerySelector ()":

documento.QuerySelector (attributo)

Qui, l'attributo è un selettore CSS, come un ID o una classe come "#myid"".la mia classe".

Esempio

Chiama il metodo "QuerySelector ()" e passa l'ID "#intestazione"Per ottenere gli elementi che contengono lo stesso ID:

var getbyquery = documento.QuerySelector ("#Heading");
console.log (getByQuery);

Dà il primo elemento abbinato come output:

Metodo 5: selezionare Elementi DOM usando il metodo "QuerySelectorall ()"

Se si desidera selezionare tutti gli elementi che contengono l'attributo specificato (ID o classe), utilizzare “QuerySelectorAll ()" metodo. Seleziona un elenco di elementi che corrispondono a un particolare selettore CSS definito. Fornisce un oggetto nodelist che contiene tutti gli elementi nel documento che corrispondevano al particolare selettore CSS.

Sintassi

Usa la seguente sintassi per ottenere l'elenco degli elementi:

documento.QuerySelectorall (attributo)

Esempio

Per ottenere l'elenco dell'elemento abbinato che contiene l'ID "intestazione" con il "QuerySelectorAll ()"Metodo e stampa su elementi sulla console:

var getbyQueryall = documento.QuerySelectorAll ("#Heading");
console.registro (getbyQueryall);

Produzione

Si tratta di selezionare elementi DOM in JavaScript.

Conclusione

Per selezionare gli elementi DOM in JavaScript, utilizzare il “getElementById ()","getElementsByClassName ()","getElementsByTagName ()","QuerySelector ()", o il "QuerySelectorAll ()" metodo. Questi metodi forniscono diversi modi per selezionare elementi dal DOM in base ai loro identificatori univoci, nomi di classe, nomi di tag o selettori CSS. Questo tutorial ha dimostrato i diversi metodi per la selezione degli elementi DOM in JavaScript.