Questo tutorial descriverà la procedura per trovare l'elemento DOM in base a qualsiasi valore di attributo.
Come trovare/recuperare un elemento in DOM in base a un valore di attributo?
Per trovare l'elemento in DOM in base a un valore di attributo, utilizzare il ' querySelector() ' metodo. Fornisce il primo elemento trovato nel documento che corrisponde al valore del selettore CSS specificato.
Nota : Per ottenere tutti gli elementi che corrispondono al valore del selettore specificato, utilizzare il ' querySelectorAll() ' metodo.
Sintassi
Per utilizzare il metodo 'querySelector()', utilizzare la seguente sintassi:
documento. querySelector ( selettore ) ;
Qui, il selettore sarà un id o una classe come ' #id ”, “ .classe ”:
Puoi anche utilizzare la sintassi data per trovare l'elemento in base al valore dell'attributo:
documento. querySelector ( '[selettore='valore']' ) ;
Nella sintassi precedente, “ selettore ' sarà ' id ' O ' classe ', o il ' valore ' sarà ' idNome ' O ' nome della classe ”.
Esempio
In un file HTML, crea un elemento div che contiene un'intestazione utilizzando l'elemento h4, un testo semplice utilizzando il tag e un div per un messaggio con ID assegnato ' Messaggio ”:
< ID div = 'div' stile = 'allineamento del testo: centro;' >< h4 classe = 'sec' id = 'intestazione' > Trova un Elemento in DOM Sulla base di un Attributo Valore h4 >
< id span = 'Benvenuto' > Benvenuti in Linuxhint span >
< ID div = 'Messaggio' >
< p id = 'messaggio' > Ciao ragazzi ! Benvenuto nei tutorial JavaScript di Linuxhint P >
div >
div >
La pagina avrà il seguente aspetto:
Ora otterremo l'elemento in cui l'id ' Messaggio ” viene assegnato utilizzando il “ querySelector() ' metodo:
ogni elemento = documento. querySelector ( '#Messaggio' )Infine, stampa l'elemento sulla console:
consolare. tronco d'albero ( elemento ) ;Nell'output, il ' div ” l'elemento è mostrato con il suo id assegnato “ Messaggio ”, che indica che l'elemento richiesto è stato recuperato con successo:
Puoi anche ottenere l'elemento usando la sintassi data. Qui otterremo l'elemento il cui id è ' msg ”:
ogni elemento = documento. querySelector ( '[id='msg']' ) ;Produzione
Ora, aggiorna il colore usando il ' stile ' proprietà:
elemento. stile . colore = 'blu' ;Come puoi vedere, il testo era in ' verde ” colore, e ora è stato aggiornato a “ blu ”:
Si tratta di trovare un elemento in un DOM basato su un valore di attributo.
Conclusione
Per trovare un elemento in DOM in base al valore di un attributo, utilizzare il ' querySelector() ” che fornisce il primo elemento nel documento che corrisponde al valore del selettore CSS specificato. Inoltre, per ottenere tutti gli elementi che corrispondono al valore del selettore specificato, utilizzare il ' querySelectorAll() ' metodo. Questo tutorial ha descritto la procedura per trovare l'elemento DOM in base a qualsiasi valore di attributo.