Trova un elemento in DOM in base a un valore dell'attributo

In varie situazioni, potrebbe essere necessario trovare un elemento nel DOM in base a un valore di attributo per l'applicazione di qualsiasi stile o qualsiasi altra funzionalità. Ad esempio, mentre si lavora con pagine Web grandi o complesse o selezionando un elemento specifico in base ai suoi attributi allo stile o manipolare. Aiuta a lavorare in modo più efficiente ed efficace con le pagine Web.

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 dell'attributo?

Per trovare l'elemento in DOM in base a un valore di attributo, utilizza il "QuerySelector ()" metodo. Fornisce il primo elemento trovato nel documento che corrisponde al valore del selettore CSS dato.

Nota: Per ottenere tutti gli elementi che corrispondono al valore del selettore specificato, usa il "QuerySelectorAll ()" metodo.

Sintassi

Per l'utilizzo del metodo "QuerySelector ()", utilizzare la seguente sintassi:

documento.QuerySelector (selettore);

Qui, il selettore sarà un ID o una classe come "#id",".classe":

È inoltre possibile utilizzare la sintassi data per trovare l'elemento in base al valore degli attributi:

documento.QuerySelector ("[selector = 'value']");

Nella sintassi sopra, "selettore" sarà "id" O "classe", o il "valore" sarà "idname" O "nome della classe".

Esempio

In un file HTML, crea un elemento Div che contiene una rotta utilizzando l'elemento H4, un testo semplice usando il tag e un div per un messaggio con ID assegnato "Messaggio":

Trova un elemento in DOM in base a un valore dell'attributo

= "Welcome"> Benvenuti a LinuxHint

Ciao ragazzi! Benvenuto sui tutorial di Linuxhint JavaScript

La pagina sembrerà come segue:

Ora otterremo l'elemento in cui l'ID "Messaggio"È assegnato usando il"QuerySelector ()" metodo:

var element = document.QuerySelector ('#Message')

Infine, stampa l'elemento sulla console:

console.log (elemento);

Nell'output, il "div"L'elemento viene mostrato con l'ID assegnato"Messaggio", Il 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":

var element = document.QuerySelector ("[id = 'msg']");

Produzione

Ora, aggiorna il colore di esso usando "stile" proprietà:

elemento.stile.color = "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 dell'attributo.

Conclusione

Per trovare un elemento in DOM in base a un valore di attributo, utilizzare il "QuerySelector ()"Metodo 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 "QuerySelectorAll ()" metodo. Questo tutorial ha descritto la procedura per trovare l'elemento DOM in base a qualsiasi valore di attributo.