Acest tutorial va descrie procedura pentru găsirea elementului DOM pe baza oricărei valori de atribut.
Cum să găsiți/preluați un element în DOM pe baza unei valori de atribut?
Pentru a găsi elementul în DOM pe baza unei valori de atribut, utilizați „ querySelector() ” metoda. Oferă primul element găsit în document care se potrivește cu valoarea selectorului CSS dată.
Notă : Pentru a obține toate elementele care se potrivesc cu valoarea selectorului specificat, utilizați „ querySelectorAll() ” metoda.
Sintaxă
Pentru a utiliza metoda „querySelector()”, utilizați următoarea sintaxă:
document. querySelector ( selector ) ;
Aici, selectorul va fi un id sau o clasă ca „ #id ”, “ .clasă ”:
De asemenea, puteți utiliza sintaxa dată pentru a găsi elementul pe baza valorii atributului:
document. querySelector ( „[selector=’valoare’]” ) ;
În sintaxa de mai sus, „ selector ' va fi ' id ” sau ” clasă ', sau ' valoare ' va fi ' idName ” sau ” numele clasei ”.
Exemplu
Într-un fișier HTML, creați un element div care conține un titlu folosind elementul h4, un text simplu folosind eticheta și un div pentru un mesaj cu id-ul atribuit „ mesaj ”:
< div id = 'div' stil = 'text-align:center;' >< h4 clasă = 'sec' id = 'rudire' > Găsiți un Element în DOM Pe baza unui Atribut Valoare h4 >
< span id = 'Bine ati venit' > Bun venit la Linuxhint span >
< div id = 'mesaj' >
< p id = 'mesaj' > Buna baieti ! Bine ați venit la tutorialele Linuxhint JavaScript p >
div >
div >
Pagina va arăta după cum urmează:
Acum, vom obține elementul unde id-ul „ mesaj ” este atribuit folosind „ querySelector() ” metoda:
fiecare element = document. querySelector ( '#mesaj' )În cele din urmă, imprimați elementul pe consolă:
consolă. Buturuga ( element ) ;În ieșire, „ div „ elementul este afișat cu id-ul atribuit „ mesaj ”, care indică faptul că elementul necesar a fost preluat cu succes:
De asemenea, puteți obține elementul folosind sintaxa dată. Aici, vom obține elementul al cărui id este „ msg ”:
fiecare element = document. querySelector ( „[id='msg']” ) ;Ieșire
Acum, actualizați culoarea acesteia folosind „ stil ” proprietate:
element. stil . culoare = 'albastru' ;După cum puteți vedea, textul era în „ verde „, iar acum a fost actualizat la „ albastru ”:
Este vorba despre găsirea unui element într-un DOM pe baza unei valori de atribut.
Concluzie
Pentru a găsi un element în DOM pe baza unei valori de atribut, utilizați „ querySelector() ” metoda care dă primul element din document care se potrivește cu valoarea selectorului CSS specificată. Mai mult, pentru a obține toate elementele care se potrivesc cu valoarea specificată a selectorului, utilizați „ querySelectorAll() ” metoda. Acest tutorial a descris procedura de găsire a elementului DOM pe baza oricărei valori de atribut.