See õpetus kirjeldab DOM-i elemendi leidmise protseduuri mis tahes atribuudi väärtuse põhjal.
Kuidas atribuudi väärtuse põhjal DOM-is elementi leida/toota?
Elemendi leidmiseks DOM-ist atribuudi väärtuse põhjal kasutage ' querySelector() ” meetod. See annab esimese dokumendist leitud elemendi, mis vastab antud CSS-i valija väärtusele.
Märge : kõigi määratud valija väärtusele vastavate elementide hankimiseks kasutage ' querySelectorAll() ” meetod.
Süntaks
Meetodi „querySelector()” kasutamiseks kasutage järgmist süntaksit:
dokument. querySelector ( valija ) ;
Siin on valijaks ID või klass nagu ' #id ”, „ .klass ”:
Elemendi leidmiseks atribuudi väärtuse põhjal saate kasutada ka antud süntaksit:
dokument. querySelector ( '[selector='value']' ) ;
Ülaltoodud süntaksis ' valija ' saab ' id ” või „ klass ”, või „ väärtus ' saab ' idName ” või „ klassi nimi ”.
Näide
Looge HTML-failis element div, mis sisaldab pealkirja, kasutades elementi h4, lihtteksti, kasutades märgendit , ja div-elementi määratud ID-ga sõnumi jaoks sõnum ”:
< divi id = 'div' stiilis = 'text-align:center;' >< h4 klass = 'sek' id = 'pealkiri' > Leia an Element in DOM Põhineb an Atribuut Väärtus h4 >
< span id = 'Tere tulemast' > Tere tulemast Linuxhinti ulatus >
< divi id = 'sõnum' >
< p id = 'sõnum' > Tere kutid ! Tere tulemast Linuxhint JavaScripti õpetustesse lk >
div >
div >
Leht näeb välja järgmine:
Nüüd saame elemendi, kus ID ' sõnum ' on määratud kasutades ' querySelector() ” meetod:
iga element = dokument. querySelector ( '#sõnum' )Lõpuks printige element konsoolil:
konsool. logi ( element ) ;Väljundis on ' div ' elementi näidatakse koos sellele määratud ID-ga ' sõnum ”, mis näitab, et nõutav element on edukalt alla laaditud:
Elemendi saab hankida ka etteantud süntaksi abil. Siit saame elemendi, mille ID on ' sõnum ”:
iga element = dokument. querySelector ( '[id='sõnum']' ) ;Väljund
Nüüd värskendage selle värvi, kasutades nuppu ' stiilis ” vara:
element. stiilis . värvi = 'sinine' ;Nagu näete, oli tekst keeles ' roheline ' värvi ja nüüd on seda värskendatud ' sinine ”:
See kõik puudutab DOM-is elemendi leidmist atribuudi väärtuse põhjal.
Järeldus
DOM-is elemendi leidmiseks atribuudi väärtuse põhjal kasutage ' querySelector() ” meetod, mis annab dokumendis esimese elemendi, mis vastab määratud CSS-i valija väärtusele. Lisaks, et saada kõik elemendid, mis vastavad määratud valija väärtusele, kasutage ' querySelectorAll() ” meetod. See õpetus kirjeldas DOM-i elemendi leidmise protseduuri mis tahes atribuudi väärtuse põhjal.