Tässä opetusohjelmassa kuvataan menettely DOM-elementin löytämiseksi minkä tahansa määritteen arvon perusteella.
Kuinka löytää / noutaa elementti DOM:sta attribuutin arvon perusteella?
Löytääksesi elementin DOM:sta attribuutin arvon perusteella, käytä ' querySelector() ”menetelmä. Se antaa asiakirjasta ensimmäisen elementin, joka vastaa annettua CSS-valitsimen arvoa.
Huomautus : Jos haluat saada kaikki elementit, jotka vastaavat määritettyä valitsimen arvoa, käytä ' querySelectorAll() ”menetelmä.
Syntaksi
Käytä seuraavaa syntaksia käyttääksesi 'querySelector()'-menetelmää:
asiakirja. querySelector ( valitsin ) ;
Tässä valitsin on tunnus tai luokka ' #id ”, “ .luokka ':
Voit myös käyttää annettua syntaksia elementin etsimiseen attribuutin arvon perusteella:
asiakirja. querySelector ( '[selector='value']' ) ;
Yllä olevassa syntaksissa ' valitsin ' tulee olemaan ' id ' tai ' luokkaa ', tai ' arvo ' tulee olemaan ' idName ' tai ' luokan nimi ”.
Esimerkki
Luo HTML-tiedostoon div-elementti, joka sisältää otsikon käyttämällä h4-elementtiä, pelkän tekstin -tunnisteen avulla ja div-elementin viestille, jolla on määritetty tunnus ' viesti ':
< div id = 'div' tyyli = 'text-align:center;' >< h4 luokkaa = 'sek' id = 'otsikko' > Etsi an Elementti in DOM Perustuu an Attribuutti Arvo h4 >
< span id = 'Tervetuloa' > Tervetuloa Linuxhintiin jänneväli >
< div id = 'viesti' >
< p id = 'viesti' > Hei kaverit ! Tervetuloa Linuxhint JavaScript -opetusohjelmiin s >
div >
div >
Sivu näyttää tältä:
Nyt saamme elementin, jossa id ' viesti ' on määritetty käyttämällä ' querySelector() 'menetelmä:
jokainen elementti = asiakirja. querySelector ( '#viesti' )Tulosta lopuksi elementti konsoliin:
konsoli. Hirsi ( elementti ) ;Tulosteessa ' div ' elementti näytetään sille määritetyllä tunnuksella ' viesti ”, joka osoittaa, että vaadittu elementti on haettu onnistuneesti:
Voit myös saada elementin käyttämällä annettua syntaksia. Täältä saamme elementin, jonka tunnus on ' viesti ':
jokainen elementti = asiakirja. querySelector ( '[id='msg']' ) ;Lähtö
Päivitä nyt sen väri käyttämällä ' tyyli ”omaisuus:
elementti. tyyli . väri = 'sininen' ;Kuten näette, teksti oli ' vihreä 'väri, ja nyt se on päivitetty muotoon ' sininen ':
Siinä on kyse elementin löytämisestä DOM:sta attribuutin arvon perusteella.
Johtopäätös
Jos haluat löytää elementin DOM:sta attribuutin arvon perusteella, käytä ' querySelector() ” -menetelmä, joka antaa asiakirjan ensimmäisen elementin, joka vastaa määritettyä CSS-valitsimen arvoa. Lisäksi saadaksesi kaikki elementit, jotka vastaavat määritettyä valitsinarvoa, käytä ' querySelectorAll() ”menetelmä. Tässä opetusohjelmassa kuvattiin menetelmä DOM-elementin löytämiseksi minkä tahansa määritteen arvon perusteella.