Hvordan få element ved attributt i JavaScript

Mens de utvikler nettsteder, er det noen situasjoner der programmerere/utviklere trenger å få elementene i JavaScript ved å bruke sine tildelte attributter som "id”,“klasse", og så videre. For å gjøre dette, bruk JavaScript “QuerySelector ()”Metode.

Denne opplæringen vil forklare prosessen for å få HTML -elementet ved attributt ved hjelp av JavaScript.

Hvordan få element ved attributt i JavaScript?

For å få et element ved attributt, “QuerySelector ()”Metode brukes. Den returnerer dokumentets første element som samsvarer med den aktuelle attributtet. Denne metoden velger en bestemt tag med en spesifikk attributtverdi. Parametrene som må sendes er "Tagid”,“klasse", og så videre.

Syntaks
Bruk den nedenfor-nevnte syntaks for å få elementet ved attributt:

dokument.QuerySelector ("[myAttribute = verdi]");

I syntaks ovenfor, pass attributtet med sin tildelte verdi som parameter.

Eksempel
I HTML -filen, først, opprette en "div”Element ved hjelp av taggen og tilordne en ID”Divid”Til det. Lag en knapp inne i DIV -elementet og fest en “ved trykk”Hendelse som vil utløse“getElement ()”Metode for å få elementet:

Klikk for å få element


Klikk

For styling av DIV vil vi bruke kodelinjene nedenfor:

#divid
polstring: 10px;
Høyde: 100px;
Bredde: 200px;
Margin: Auto;
bakgrunnsfarge: rosa;

Den tilsvarende utgangen vil være som følger:

I JavaScript -filen, definer en funksjon "getElement ()”Det vil utløse mens knappen er klikket. Ring "QuerySelector ()”Metode og gi attributtet”id”Og dens verdi”Divid”Som et argument og lagre det resulterende elementet i en variabel”element”:

funksjon getElement ()
var element = dokument.querySelector ('[id = "divid"]');
Varsel (element);

Den gitte utgangen viser at attributtet “Divid”Tilhører et element”div”:

Hvis du vil se alle elementene i det spesifikke elementet, i stedet for å kalle varselet (), bruk "konsoll.Logg()”Metode som vil vise elementet inkludert barneelementene.

funksjon getElement ()
var element = dokument.querySelector ('[id = "divid"]');
konsoll.logg (element);

Produksjon

Ovennevnte GIF viser HTML “div”Element som har et attributt med verdien”Divid”, Med sine barnelementer i konsollen ved å klikke på knappen.

Konklusjon

For å få et element ved attributt, bruk JavaScript forhåndsdefinert “QuerySelector ()”Metode. Den brukes til å velge en bestemt tag med en bestemt attributtverdi. Denne opplæringen forklarer prosessen for å få HTML -elementet ved attributt ved hjelp av JavaScript.