„JavaScript“ programoje „ querySelectorAll() “ metodas nuskaito patį pirmąjį elementą, kuris tiksliai atitinka nurodytus CSS parinkiklius. Šis metodas pradeda eiti per DOM medį, kad atliktų šią užduotį. Kai elementas randamas, specialioms užduotims atlikti jis taiko įtaisytąsias JavaScript ypatybes arba metodus, apibrėžtus scenarijaus skyriuje. Šis metodas dažniausiai naudojamas tiksliniams elementams parinkti pagal reikalavimus. Tai leidžia vartotojams pasirinkti visus elementus, kurie atitinka nurodytą parinkiklį arba konkretų, esantį nurodytoje rodyklėje.
Šis vadovas iliustruoja metodo „querySelectorAll()“ naudojimą „JavaScript“.
Kaip naudoti „querySelectorAll()“ metodą „JavaScript“?
Norėdami naudoti ' querySelectorAll() “ metodą, kaip argumentą nurodykite CSS parinkiklį. CSS parinkikliai apima „Tipas, klasė ir ID“. Jei CSS parinkiklis neteisingas, jis grąžina sintaksės klaidą, kitu atveju kaip standartinę išvestį pateikia statinį NodeList objektą.
Sintaksė
document.querySelectorAll ( CSS parinkikliai )
Aukščiau pateiktoje sintaksėje „ CSS parinkikliai “ nurodo visus galiojančius CSS parinkiklius.
Praktiškai panaudokime aukščiau apibrėžtą sintaksę.
HTML kodas
Suteikto HTML kodo apžvalga:
< h2 klasė = 'demo' > Pirma antraštė h2 >< h3 klasė = 'demo' > Antroji antraštė h3 >
< p klasė = 'demo' > Pirma pastraipa p >
< p klasė = 'demo' > Antra pastraipa p >
< mygtuką paspaudus = 'jsFunc()' > Paspauskite čia ! mygtuką >
Aukščiau pateiktose kodo eilutėse:
- „ “ žyma prideda paantraštę su klase „demo“.
- „ “ žyma apibrėžia antrą paantraštę su ta pačia klase, pavadinta „demo“.
- „ “ žymos įterpia pastraipos teiginius, turinčius tą pačią klasę, ty „demo“.
- „
“ žymoje yra naujas mygtukas su pelės įvykiu „onclick“, kad būtų vykdoma funkcija „jsFunc()“.
Pastaba: Šiame vadove laikomasi konkretaus HTML kodo.
1 pavyzdys: metodo „querySelectorAll()“ taikymas norint pasirinkti elementus, turinčius tą pačią klasę, ir pakeisti jų spalvas
Šiame pavyzdyje naudojamas metodas „querySelectorAll()“, kad būtų galima pasirinkti visus elementus, kurie naudoja „demo“ klasę.
JavaScript kodas
Apžvelkime toliau pateiktą kodą:
< scenarijus >funkcija jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
dėl ( leisti aš = 0 ; i < sąrašas.ilgis; i++ ) {
sąrašą [ i ] .style.color = 'oranžuotas' ;
}
}
scenarijus >
Aukščiau pateiktose kodo eilutėse:
- „ jsFunc() “ funkcija yra apibrėžta.
- Savo apibrėžime „sąrašo“ kintamasis naudoja „ querySelectorAll() “ metodą, norėdami pasirinkti visus elementus, turinčius klasę „demo“.
- Toliau „ dėl ' ciklas inicijuoja mazgų sąrašą, kad būtų kartojamas visi rasti HTML elementai, turintys klasę ' demo “ ir pakeiskite teksto spalvą naudodami „ stilius.spalva ' nuosavybė.
Išvestis
Aukščiau pateiktame išvestyje matyti, kad elementų, turinčių tą patį klasės pavadinimą, t. y. „demo“ teksto spalva pakeičiama spustelėjus mygtuką.
2 pavyzdys: metodo „querySelectorAll()“ taikymas norint pasirinkti konkrečius indeksuotus elementus
Be visų elementų, vartotojas taip pat gali pasirinkti konkretų indeksuotą elementą, kurio klasė yra „demo“.
JavaScript kodas
Apsvarstykite pateiktą „JavaScript“ kodą:
< scenarijus >funkcija jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
sąrašą [ 0 ] .style.color = 'žalias' ;
}
scenarijus >
Aukščiau pateiktame kodo fragmente:
- „Sąrašo“ kintamasis pasirenka „h2“ elementą, kurio klasė yra „demo“, naudojant „ querySelectorAll() “ metodas.
- Po to kintamasis 'sąrašas' nurodo 'h2' elemento indeksą, kad pakeistų 'H2' elemento, esančio '0' indekse, teksto spalvą.
Išvestis
Išvestis rodo, kad „H2“ elemento, esančio ties nuliu indeksu, teksto spalva, paspaudus mygtuką, pasikeitė klasė „demo“.
3 pavyzdys: „querySelectorAll()“ metodo taikymas, norint gauti tą pačią klasę turinčių elementų skaičių
Šiame pavyzdyje nuskaitomas elementų, turinčių tą pačią klasę, skaičius naudojant „querySelectorAll()“ metodą.
HTML kodas
Pirmiausia pažiūrėkite į pakeistą „1 pavyzdžio“ HTML kodą:
< p id = 'dėl' > p >
Aukščiau nurodytame HTML kode HTML kodo „1 pavyzdys“ pabaigoje pridėkite tuščią pastraipą su ID „para“.
JavaScript kodas
Dabar tęskite su JavaScript kodu:
< scenarijus >funkcija jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'dėl' ) .innerHTML = mazgų sąrašas.ilgis;
}
scenarijus >
Pagal aukščiau pateiktą kodo fragmentą:
- Funkcija „jsFunc()“ pirmiausia pasirenka visus „
“ elementus, naudodama „ querySelectorAll() “ metodas.
- Po to „ getElementById() “ metodas pasiekia pridėtą tuščią pastraipą per savo ID „para“, kad pridėtų ją su grąžinta pritaikytos „ilgio“ nuosavybės verte.
Išvestis
Kaip matyti, aukščiau pateiktame išvestyje iš viso rodomi „4“ elementai, atitinkantys nurodytą CSS klasės parinkiklį „demo“.
Išvada
„ querySelectorAll() “ metodą galima lengvai naudoti nurodant CSS parinkiklį kaip jo reikšmę. Šis metodas atitinka kiekvieną HTML elementą ir parenka tuos, kurie atitinka nurodytą parinkiklį. Pasirinkus elementus, jis atlieka jiems reikalingą užduotį, apibrėžtą scenarijaus skyriuje. Šis vadovas trumpai iliustruoja „querySelectorAll()“ metodo naudojimą „JavaScript“.