Come ottenere elemento per attributo in javascript

Durante lo sviluppo di siti Web, ci sono alcune situazioni in cui programmatori/sviluppatori devono ottenere gli elementi in JavaScript utilizzando i loro attributi assegnati come "id","classe", e così via. Per fare ciò, usa il javascript "QuerySelector ()" metodo.

Questo tutorial spiegherà il processo per ottenere l'elemento HTML mediante attributo usando JavaScript.

Come ottenere elemento per attributo in javascript?

Per ottenere un elemento per attributo, il "QuerySelector ()"Viene utilizzato il metodo. Restituisce il primo elemento del documento che corrisponde all'attributo particolare. Questo metodo seleziona un tag particolare con un valore di attributo specifico. I parametri che devono essere passati sono i "Tagid","classe", e così via.

Sintassi
Usa la sintassi di seguito per ottenere l'elemento per attributo:

documento.QuerySelector ("[myattribute = value]");

Nella sintassi sopra, passare l'attributo con il suo valore assegnato come parametro.

Esempio
Nel file HTML, prima, crea un "div"Elemento usando il tag e assegnare un ID"dividi"Ad esso. Crea un pulsante all'interno dell'elemento Div e allega un "al clic"Evento che attiverà il"getElement ()"Metodo per ottenere l'elemento:

Fare clic per ottenere l'elemento


Clic

Per lo styling del Div, useremo le righe del codice seguenti:

#divid
imbottitura: 10px;
Altezza: 100px;
larghezza: 200px;
Margine: auto;
Background-color: Pink;

L'output corrispondente sarà il seguente:

Nel file JavaScript, definisci una funzione "getElement ()"Ciò si attiverà mentre si fa clic sul pulsante. Chiama il "QuerySelector ()"Metodo e passa l'attributo"id"E il suo valore"dividi"Come argomento e memorizzare l'elemento risultante in una variabile"elemento":

funzione getElement ()
var element = document.QuerySelector ('[id = "dividid"]');
avviso (elemento);

L'output dato mostra che l'attributo "dividi"Appartiene a un elemento"div":

Se si desidera vedere tutti gli elementi all'interno dell'elemento specifico, invece di chiamare il metodo Alert () usa il "console.tronco d'albero()"Metodo che mostrerà l'elemento inclusi i suoi elementi figlio.

funzione getElement ()
var element = document.QuerySelector ('[id = "dividid"]');
console.log (elemento);

Produzione

La gif sopra mostra l'HTML "div"Elemento che ha un attributo con il valore"dividi", Con i suoi elementi figlio nella console facendo clic sul pulsante.

Conclusione

Per ottenere un elemento per attributo, usa JavaScript predefinito "QuerySelector ()" metodo. Viene utilizzato per selezionare un tag particolare con un valore di attributo specifico. Questo tutorial spiega il processo per ottenere l'elemento HTML mediante attributo usando JavaScript.