Questo tutorial dimostrerà i diversi metodi per selezionare gli elementi DOM in JavaScript.
Quali sono i diversi modi per selezionare gli elementi DOM in JavaScript?
Utilizza i seguenti metodi per selezionare gli elementi DOM in JavaScript:
- metodo getElementById()
- metodo getElementsByClassName()
- metodo getElementsByTagName()
- metodo querySelector()
- metodo querySelectorAll()
Metodo 1: selezionare gli elementi DOM utilizzando il metodo 'getElementById ()'.
Per selezionare gli elementi DOM utilizzare il ' getElementById() ” metodo basato sull'id assegnato all'elemento. Questo metodo seleziona un singolo elemento in base al suo unico ' id 'attributo. Fornisce un riferimento all'elemento con l'id specificato e restituisce ' nullo ” se non viene trovato alcun elemento corrispondente.
Sintassi
Utilizzare la sintassi indicata di seguito per il metodo getElementById():
documento. getElementById ( 'IDNome' )
Ecco, il “ idNome ” è il nome di un attributo id assegnato a un elemento.
Esempio
In un file HTML, crea due intestazioni in un elemento div utilizzando ' h4 etichetta '. Assegna ID all'elemento div e intestazioni 'h4' agli elementi denominati ' div ' E ' intestazione ”, rispettivamente. Aggiungi l'attributo style all'elemento div per allinearlo al centro. Inoltre, assegna una classe ' sezione ” alla seconda intestazione che cambia colore:
< div id = 'div' stile = 'allineamento del testo: centro;' >< h4 id = 'intestazione' > Accedi agli elementi DOM utilizzando metodi diversi < / h4 >
< h4 classe = 'sezione' id = 'intestazione' > Seleziona elementi DOM in JavaScript utilizzando il metodo 'getElementById ()'
< / h4 >
< / div >
Ora otterremo il ' div ” elemento utilizzando il suo id assegnato con l'aiuto del “ getElementById() ' metodo:
era getById = documento. getElementById ( 'div' ) ;Stampa l'elemento contro l'id ' div ' sulla console:
consolare. tronco d'albero ( getById ) ;Si può vedere che l'elemento HTML richiesto è stato recuperato con successo:
Metodo 2: selezionare gli elementi DOM utilizzando il metodo 'getElementsByClassName ()'.
Puoi anche selezionare l'elemento DOM usando la sua classe assegnata con l'aiuto di ' getElementsByClassName() ' metodo. Seleziona un elenco di elementi in base al nome della classe. Restituisce un oggetto HTMLCollection attivo, un oggetto simile a un array che contiene tutti gli elementi con il nome di classe specificato.
Sintassi
La seguente sintassi è utilizzata per il metodo 'getElementsByClassName()':
documento. getElementsByClassName ( 'nome della classe' )Esempio
Qui otterremo l'elemento che contiene la classe ' sezione ” e stampa sulla console:
era getPerClasse = documento. getElementsByClassName ( 'sezione' ) ;consolare. tronco d'albero ( getPerClasse ) ;
Come puoi vedere nell'output, è stato restituito un array di lunghezza 1 che contiene un elemento ' h4 ” che appartiene alla classe “ sezione ”:
Metodo 3: selezionare gli elementi DOM utilizzando il metodo 'getElementsByTagName ()'.
Nel caso in cui non ci sia un id o una classe assegnata a un elemento, usa il ' getElementsByTagName() ” per ottenere l'elemento in base al nome del tag. Restituisce anche un oggetto HTMLCollection attivo, che è un oggetto simile a un array che contiene tutti gli elementi con il nome di tag specificato.
Sintassi
Segui la sintassi data per selezionare gli elementi in base al nome del tag:
getElementsByTagName ( tagNome )Esempio
Richiamare il metodo 'getElementsByTagName()' passando il nome del tag ' h4 ”. Quindi, stampa l'elenco degli elementi che corrispondono al nome del tag specificato sulla console:
era getPerTag = documento. getElementsByTagName ( 'h4' ) ;consolare. tronco d'albero ( getPerTag ) ;
Produzione
Metodo 4: selezionare gli elementi DOM utilizzando il metodo 'querySelector ()'.
Usa il ' querySelector() ” 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 nessun elemento è abbinato, dà ' nullo ”.
Sintassi
La sintassi indicata di seguito è 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:
era getByquery = documento. querySelector ( '#intestazione' ) ;consolare. tronco d'albero ( getByquery ) ;
Fornisce il primo elemento corrispondente come output:
Metodo 5: selezionare gli elementi DOM utilizzando il metodo 'querySelectorAll ()'.
Se vuoi selezionare tutti gli elementi che contengono l'attributo specificato (id o classe), usa il ' 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 corrispondono al particolare selettore CSS.
Sintassi
Utilizzare la seguente sintassi per ottenere l'elenco di elementi:
documento. querySelectorAll ( attributo )Esempio
Per ottenere l'elenco dell'elemento corrispondente che contiene l'id ' intestazione ' con il ' querySelectorAll() ” metodo e stampa sugli elementi sulla console:
era getByqueryTutti = documento. querySelectorAll ( '#intestazione' ) ;consolare. tronco d'albero ( getByqueryTutti ) ;
Produzione
Si tratta di selezionare gli 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 gli elementi dal DOM in base ai loro identificatori univoci, nomi di classi, nomi di tag o selettori CSS. Questo tutorial ha dimostrato i diversi metodi per selezionare gli elementi DOM in JavaScript.