JavaScriptis on ' querySelectorAll() ” meetod hangib kõige esimese elemendi, mis vastab täpselt määratud CSS-i valijatele. See meetod alustab selle ülesande täitmiseks DOM-puu läbimist. Kui element on leitud, rakendab see eriülesannete täitmiseks skripti jaotises määratletud JavaScripti sisseehitatud atribuute või meetodeid. Seda meetodit kasutatakse tavaliselt sihitud elementide valimiseks vastavalt nõuetele. See võimaldab kasutajatel valida kõik elemendid, mis vastavad määratud valijale või konkreetsele antud indeksisse paigutatud valijale.
See juhend illustreerib meetodi „querySelectorAll()” kasutamist JavaScriptis.
Kuidas kasutada JavaScriptis meetodit 'querySelectorAll()'?
Et kasutada ' querySelectorAll() ” meetodil, määrake selle argumendiks CSS-i valija. CSS-i valijate hulka kuuluvad 'Tüüp, klass ja ID'. Kui CSS-i valija on kehtetu, tagastab see süntaksivea, vastasel juhul tagastab standardväljundina staatilise NodeListi objekti.
Süntaks
document.querySelectorAll ( CSS-i valijad )
Ülaltoodud süntaksis on ' CSS-i valijad ” viita kõigile kehtivatele CSS-i valijatele.
Kasutame ülaltoodud süntaksit praktiliselt.
HTML-kood
Ülevaade antud HTML-koodist:
< h2 klass = 'demo' > Esimene pealkiri h2 >< h3 klass = 'demo' > Teine pealkiri h3 >
< lk klass = 'demo' > Esimene lõik lk >
< lk klass = 'demo' > Teine lõik lk >
< nuppu onclick = 'jsFunc()' > Kliki siia ! nuppu >
Ülaltoodud koodiridades:
- ' ” lisab alampealkirja, mille klass on „demo”.
- ' märgend määratleb teise alampealkirja sama klassiga nimega 'demo'.
- ' ” märgistavad lõigulaused, millel on sama klass, st „demo”.
- '
märgend sisaldab uut nuppu 'onclick' hiiresündmusega funktsiooni 'jsFunc()' käivitamiseks.
Märge: Selles juhendis järgitakse konkreetset HTML-koodi.
Näide 1: 'querySelectorAll()' meetodi rakendamine sama klassi elementide valimiseks ja nende värvide muutmiseks
See näide kasutab meetodit 'querySelectorAll()', et valida kõik elemendid, mis kasutavad klassi 'demo'.
JavaScripti kood
Vaatame alltoodud koodi:
< stsenaarium >funktsiooni jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
jaoks ( lase i = 0 ; i < list.length; i++ ) {
nimekirja [ i ] .style.color = 'oranžeeritud' ;
}
}
stsenaarium >
Ülaltoodud koodiridades:
- ' jsFunc() ” funktsioon on määratletud.
- Oma määratluses kasutab muutuja 'loend' väärtust ' querySelectorAll() ” meetod, et valida kõik elemendid, mille klass on “demo”.
- Järgmiseks ' jaoks ' tsükkel initsialiseerib sõlmede loendi, et itereerida kõiki leitud HTML-i elemente, millel on klass ' demo ' ja muutke nende teksti värvi, kasutades nuppu ' stiil.värv ” vara.
Väljund
Ülaltoodud väljundis on näha, et sama klassinime, st “demo” sisaldavate elementide tekstivärv muutub nupuvajutusega.
Näide 2: meetodi 'querySelectorAll()' rakendamine konkreetsete indekseeritud elementide valimiseks
Lisaks kõikidele elementidele saab kasutaja valida ka konkreetse indekseeritud elemendi, mille klass on “demo”.
JavaScripti kood
Mõelge antud JavaScripti koodile:
< stsenaarium >funktsiooni jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
nimekirja [ 0 ] .style.color = 'roheline' ;
}
stsenaarium >
Ülaltoodud koodilõigul:
- Muutuja “list” valib elemendi “h2” abil, mille klassiks on “demo”. querySelectorAll() ” meetod.
- Pärast seda määrab muutuja 'loend' elemendi 'h2' indeksi, et muuta indeksisse '0' paigutatud 'H2' elemendi teksti värvi.
Väljund
Väljund näitab, et nullindeksisse paigutatud elemendi “H2” tekstivärv on nupu klõpsamisel muutunud klassi “demo”.
Näide 3: meetodi 'querySelectorAll()' rakendamine samasse klassi kuuluvate elementide arvu saamiseks
See näide otsib meetodi 'querySelectorAll()' abil sama klassi elementide arvu.
HTML-kood
Kõigepealt vaadake 'Näide 1' muudetud HTML-koodi:
< lk id = 'eest' > lk >
Ülaltoodud HTML-koodis lisage HTML-koodi 'Näide 1' lõppu tühi lõik ID-ga 'para'.
JavaScripti kood
Nüüd jätkake JavaScripti koodiga:
< stsenaarium >funktsiooni jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'eest' ) .innerHTML = nodelist.length;
}
stsenaarium >
Ülaltoodud koodilõigu järgi:
- Funktsioon 'jsFunc()' valib kõigepealt kõik '
' elemendid, kasutades ' querySelectorAll() ” meetod.
- Pärast seda ' getElementById() Meetod pääseb lisatud tühjale lõigule juurde oma ID 'para' kaudu, et lisada sellele rakendatud atribuudi 'pikkus' tagastatud väärtus.
Väljund
Nagu näha, näitab ülaltoodud väljund kokku “4” elementi, mis vastavad määratud CSS-klassi valija “demo”.
Järeldus
' querySelectorAll() ” meetodit saab hõlpsasti kasutada, määrates selle väärtuseks CSS-i valija. See meetod sobitab iga HTML-i elemendi ja valib need, mis vastavad määratud valijale. Kui elemendid on valitud, täidab see skripti jaotises määratletud ülesande. See juhend illustreeris lühidalt meetodi „querySelectorAll()” kasutamist JavaScriptis.