Finn et element i DOM basert på en attributtverdi

I forskjellige situasjoner kan det hende du må finne et element i DOM basert på en attributtverdi for å anvende noen styling eller annen funksjonalitet. For eksempel, mens du jobber med store eller komplekse websider eller velger et spesifikt element basert på dets attributter til stil eller manipulerer. Det hjelper å jobbe mer effektivt og effektivt med websider.

Denne opplæringen vil beskrive prosedyren for å finne DOM -elementet basert på enhver attributtverdi.

Hvordan finne/hente et element i DOM basert på en attributtverdi?

For å finne elementet i DOM basert på en attributtverdi, bruk "QuerySelector ()”Metode. Det gir det første elementet som finnes i dokumentet som samsvarer med den gitte CSS -velgerverdien.

Merk: For å få alle elementene som samsvarer med den spesifiserte valgverdien, bruk "QuerySelectorAll ()”Metode.

Syntaks

For å bruke metoden “QuerySelector ()”, bruk følgende syntaks:

dokument.QuerySelector (Selector);

Her vil velgeren være en ID eller klasse som "#id”,“.klasse”:

Du kan også bruke den gitte syntaks for å finne elementet basert på attributtverdi:

dokument.querySelector ("[selektor = 'verdi']");

I syntaks ovenfor, "velger" vil være "id”Eller“klasse", eller "verdi" vil være "Idname”Eller“klassenavn”.

Eksempel

I en HTML -fil, lag et DIV -element som inneholder et overskrift ved hjelp av H4 -element, en ren tekst ved hjelp av tag og en div for en melding med tilordnet ID “beskjed”:

Finn et element i DOM basert på en attributtverdi

= "Velkommen"> Velkommen til Linuxhint

Hei folkens! Velkommen på Linuxhint JavaScript Tutorials

Siden vil se ut som følger:

Nå vil vi få elementet der ID “beskjed”Tildeles ved hjelp av“QuerySelector ()”Metode:

var element = dokument.QuerySelector ('#melding')

Til slutt, skriv ut elementet på konsollen:

konsoll.logg (element);

I utgangen, "div”Element vises med sin tildelte ID”beskjed”, Som indikerer at det nødvendige elementet er hentet med hell:

Du kan også få elementet ved hjelp av den gitte syntaksen. Her vil vi få elementet hvis ID er “msg”:

var element = dokument.querySelector ("[id = 'msg']");

Produksjon

Oppdater nå fargen på den ved å bruke "stil”Eiendom:

element.stil.farge = "blå";

Som du kan se, var teksten i "grønn”Farge, og nå har den blitt oppdatert til“blå”:

Det handler om å finne et element i en DOM basert på en attributtverdi.

Konklusjon

For å finne et element i DOM basert på en attributtverdi, bruk "QuerySelector ()”Metode som gir det første elementet i dokumentet som samsvarer med den spesifiserte CSS -velgerverdien. For å få alle elementene som samsvarer med den spesifiserte valgverdien, bruker du dessuten “QuerySelectorAll ()”Metode. Denne opplæringen beskrev prosedyren for å finne DOM -elementet basert på enhver attributtverdi.