JavaScriptissä ' querySelectorAll() ” -menetelmä hakee aivan ensimmäisen elementin, joka täsmälleen vastaa määritettyjä CSS-valitsimia. Tämä menetelmä alkaa kulkea DOM-puun läpi tämän tehtävän suorittamiseksi. Kun elementti on löydetty, se käyttää komentosarjaosiossa määritettyjä JavaScriptin sisäisiä ominaisuuksia tai menetelmiä erikoistehtävien suorittamiseen. Tätä menetelmää käytetään yleensä kohdeelementtien valitsemiseen vaatimusten mukaisesti. Sen avulla käyttäjät voivat valita kaikki elementit, jotka vastaavat määritettyä valitsinta tai tiettyä hakemistoon sijoitettua.
Tämä opas havainnollistaa 'querySelectorAll()'-menetelmän käyttöä JavaScriptissä.
Kuinka käyttää 'querySelectorAll()' -menetelmää JavaScriptissä?
Käyttääksesi ' querySelectorAll() ” -menetelmää, määritä CSS-valitsin sen argumentiksi. CSS-valitsimiin kuuluvat 'Tyyppi, luokka ja tunnus'. Jos CSS-valitsin on virheellinen, se palauttaa syntaksivirheen, muussa tapauksessa se palauttaa vakiotulostuksensa staattisen NodeList-objektin.
Syntaksi
document.querySelectorAll ( CSS-valitsimet )
Yllä olevassa syntaksissa ' CSS-valitsimet ” viittaa kaikkiin kelvollisiin CSS-valitsimiin.
Käytetään yllä määriteltyä syntaksia käytännössä.
HTML-koodi
Yleiskatsaus annetusta HTML-koodista:
< h2 luokkaa = 'demo' > Ensimmäinen otsikko h2 >< h3 luokkaa = 'demo' > Toinen otsikko h3 >
< s luokkaa = 'demo' > Ensimmäinen kappale s >
< s luokkaa = 'demo' > Toinen kappale s >
< -painiketta klikkaamalla = 'jsFunc()' > Klikkaa tästä ! -painiketta >
Yllä olevilla koodiriveillä:
- ' ' -tunniste lisää alaotsikon, jonka luokka on 'demo'.
- ' ' -tunniste määrittää toisen alaotsikon samalla luokalla nimeltä 'demo'.
- ' ' -tunnisteet upottavat kappalelausekkeet, joilla on sama luokka, eli 'demo'.
- '
' -tunniste sisältää uuden painikkeen 'onclick'-hiiritapahtumalla 'jsFunc()'-funktion suorittamiseksi.
Huomautus: Tiettyä HTML-koodia noudatetaan läpi tämän oppaan.
Esimerkki 1: 'querySelectorAll()'-menetelmän käyttäminen saman luokan elementtien valitsemiseen ja niiden värien vaihtamiseen
Tässä esimerkissä käytetään 'querySelectorAll()'-menetelmää kaikkien elementtien valitsemiseen, jotka käyttävät 'demo'-luokkaa.
JavaScript-koodi
Katsotaanpa alla olevaa koodia:
< käsikirjoitus >toiminto jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
varten ( antaa minä = 0 ; i < lista.pituus; i++ ) {
lista [ i ] .style.color = 'oranssinpunainen' ;
}
}
käsikirjoitus >
Yllä olevilla koodiriveillä:
- ' jsFunc() ”-toiminto on määritelty.
- Määritelmässään 'lista'-muuttuja käyttää ' querySelectorAll() ' -menetelmää valitaksesi kaikki elementit, joilla on luokka 'demo'.
- Seuraavaksi ' varten ' silmukka alustaa solmuluettelon iteroidakseen kaikkia löydettyjä HTML-elementtejä, joilla on luokka ' demo ' ja muuttaa tekstin väriä käyttämällä ' tyyli.väri ” omaisuutta.
Lähtö
Yllä olevasta lähdöstä näkyy, että saman luokan nimen eli “demo” sisältävien elementtien tekstin väri muuttuu napin painalluksella.
Esimerkki 2: 'querySelectorAll()'-menetelmän käyttäminen tiettyjen indeksoitujen elementtien valitsemiseen
Kaikkien elementtien lisäksi käyttäjä voi myös valita tietyn indeksoidun elementin, jonka luokka on 'demo'.
JavaScript-koodi
Harkitse annettua JavaScript-koodia:
< käsikirjoitus >toiminto jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
lista [ 0 ] .style.color = 'vihreä' ;
}
käsikirjoitus >
Yllä olevassa koodinpätkässä:
- 'Lista'-muuttuja valitsee 'h2'-elementin, jonka luokka on 'demo' ' querySelectorAll() ”menetelmä.
- Tämän jälkeen 'lista'-muuttuja määrittää 'h2'-elementin indeksin muuttaakseen '0'-indeksiin sijoitetun 'H2'-elementin tekstin väriä.
Lähtö
Tulos osoittaa, että 'H2'-elementin tekstiväri, joka on sijoitettu nollaindeksiin, on muuttunut luokan 'demo' painikkeen painalluksella.
Esimerkki 3: 'querySelectorAll()'-menetelmän käyttäminen saadakseen saman luokan elementtien lukumäärän
Tämä esimerkki hakee saman luokan elementtien määrän käyttämällä 'querySelectorAll()'-menetelmää.
HTML-koodi
Katso ensin 'esimerkin 1' muokattu HTML-koodi:
< s id = 'for' > s >
Liitä edellä mainittuun HTML-koodiin tyhjä kappale, jonka tunnuksella on 'para' 'Example 1' HTML-koodin loppuun.
JavaScript-koodi
Jatka nyt JavaScript-koodilla:
< käsikirjoitus >toiminto jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'for' ) .innerHTML = nodelist.length;
}
käsikirjoitus >
Yllä olevan koodinpätkän mukaan:
- Funktio “jsFunc()” valitsee ensin kaikki “
”-elementit käyttämällä “ querySelectorAll() ”menetelmä.
- Sen jälkeen ' getElementById() ” -menetelmä käyttää lisättyä tyhjää kappaletta sen id 'para' kautta lisätäkseen sen palautetun 'length'-ominaisuuden arvon.
Lähtö
Kuten näkyy, yllä oleva tulos näyttää yhteensä '4' elementtiä, jotka vastaavat määritettyä CSS-luokan valitsimen 'demoa'.
Johtopäätös
' querySelectorAll() ” -menetelmää voidaan käyttää helposti määrittämällä arvoksi CSS-valitsin. Tämä menetelmä sovittaa jokaisen HTML-elementin ja valitsee ne, jotka vastaavat määritettyä valitsinta. Kun elementit on valittu, se suorittaa niille komentosarjaosiossa määritellyn tehtävän. Tämä opas havainnollisti lyhyesti 'querySelectorAll()'-menetelmän käyttöä JavaScriptissä.