Programmā JavaScript “ querySelectorAll() ” metode izgūst pašu pirmo elementu, kas precīzi atbilst norādītajiem CSS atlasītājiem. Šī metode sāk šķērsot DOM koku, lai veiktu šo uzdevumu. Kad elements ir atrasts, tas izmanto JavaScript iebūvētos rekvizītus vai metodes, kas definētas skripta sadaļā, lai veiktu īpašus uzdevumus. Šo metodi parasti izmanto, lai atlasītu mērķelementus atbilstoši prasībām. Tas ļauj lietotājiem atlasīt visus elementus, kas atbilst norādītajam atlasītājam vai konkrētajam, kas atrodas dotajā rādītājā.
Šī rokasgrāmata ilustrē metodes “querySelectorAll()” izmantošanu JavaScript.
Kā izmantot metodi “querySelectorAll()” JavaScript?
Lai izmantotu ' querySelectorAll() ” metodi, kā argumentu norādiet CSS atlasītāju. CSS atlasītāji ietver “tips, klase un id”. Ja CSS atlasītājs nav derīgs, tas atgriež sintakses kļūdu, pretējā gadījumā kā standarta izvadi atgriež statisku NodeList objektu.
Sintakse
document.querySelectorAll ( CSS atlasītāji )
Iepriekš minētajā sintaksē ' CSS atlasītāji ” attiecas uz visiem derīgajiem CSS atlasītājiem.
Izmantosim iepriekš definēto sintaksi praktiski.
HTML kods
Dotā HTML koda pārskats:
< h2 klasē = 'demo' > Pirmais virsraksts h2 >< h3 klasē = 'demo' > Otrais virsraksts h3 >
< lpp klasē = 'demo' > Pirmā rindkopa lpp >
< lpp klasē = 'demo' > Otrā rindkopa lpp >
< pogu onclick = 'jsFunc()' > Noklikšķiniet šeit ! pogu >
Iepriekš minētajās koda rindās:
- ' ” tags pievieno apakšvirsrakstu ar klasi “demonstrācija”.
- ' ” tags definē otru apakšvirsrakstu ar to pašu klasi ar nosaukumu “demo”.
- ' ” tagos ir iegulti rindkopas priekšraksti, kuriem ir tāda pati klase, t.i., “demonstrācija”.
- '
' tagā ir iekļauta jauna poga ar 'onclick' peles notikumu, lai izpildītu funkciju 'jsFunc()'.
Piezīme: Šajā rokasgrāmatā tiek ievērots konkrētais HTML kods.
1. piemērs: metodes “querySelectorAll()” izmantošana, lai atlasītu elementus, kuriem ir viena klase un mainītu to krāsas
Šajā piemērā tiek izmantota metode “querySelectorAll()”, lai atlasītu visus elementus, kas izmanto “demonstrācijas” klasi.
JavaScript kods
Apskatīsim tālāk norādīto kodu:
< skripts >funkciju jsFunc ( ) {
const saraksts = document.querySelectorAll ( '.demo' ) ;
priekš ( ļaut i = 0 ; i < saraksts.garums; i++ ) {
sarakstu [ i ] .style.color = 'oranžēts' ;
}
}
skripts >
Iepriekš minētajās koda rindās:
- ' jsFunc() ” funkcija ir definēta.
- Savā definīcijā mainīgais “saraksts” izmanto “ querySelectorAll() ” metodi, lai atlasītu visus elementus, kuru klase ir “demo”.
- Tālāk “ priekš ' cilpa inicializē mezglu sarakstu, lai atkārtotu visus atrastos HTML elementus, kuriem ir klase ' demo un mainiet to teksta krāsu, izmantojot stils.krāsa ” īpašums.
Izvade
Iepriekš minētajā izvadē var redzēt, ka elementu teksta krāsa, kas ietver vienu un to pašu klases nosaukumu, t.i., “demo”, tiek mainīta, noklikšķinot uz pogas.
2. piemērs: metodes “querySelectorAll()” izmantošana, lai atlasītu konkrētus indeksētos elementus
Papildus visiem elementiem lietotājs var izvēlēties arī konkrēto indeksēto elementu ar klasi “demo”.
JavaScript kods
Apsveriet doto JavaScript kodu:
< skripts >funkciju jsFunc ( ) {
const saraksts = document.querySelectorAll ( 'h2.demo' ) ;
sarakstu [ 0 ] .style.color = 'zaļš' ;
}
skripts >
Iepriekš minētajā koda fragmentā:
- Mainīgais “saraksts” atlasa elementu “h2”, kura klase ir “demo”, izmantojot “ querySelectorAll() ” metode.
- Pēc tam mainīgais “list” norāda elementa “h2” indeksu, lai mainītu “H2” elementa teksta krāsu, kas novietots indeksā “0”.
Izvade
Izvade parāda, ka nulles indeksā novietotā elementa “H2” teksta krāsai ir mainīta klase “demo”, noklikšķinot uz pogas.
3. piemērs: metodes “querySelectorAll()” izmantošana, lai iegūtu vienas klases elementu skaitu
Šajā piemērā tiek izgūts to elementu skaits, kuriem ir viena klase, izmantojot metodi “querySelectorAll()”.
HTML kods
Vispirms apskatiet “1. piemēra” modificēto HTML kodu:
< lpp id = 'priekš' > lpp >
Iepriekš norādītajā HTML kodā pievienojiet tukšu rindkopu ar ID 'para' HTML koda '1. piemērs' beigās.
JavaScript kods
Tagad turpiniet ar JavaScript kodu:
< skripts >funkciju jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'priekš' ) .innerHTML = nodelist.length;
}
skripts >
Saskaņā ar iepriekš minēto koda fragmentu:
- Funkcija “jsFunc()” vispirms atlasa visus “
” elementus, izmantojot “ querySelectorAll() ” metode.
- Pēc tam ' getElementById() Metode piekļūst pievienotajai tukšajai rindkopai, izmantojot tās id “para”, lai pievienotu tai piemērotā rekvizīta “garums” atgriezto vērtību.
Izvade
Kā redzams, iepriekš redzamajā izvadē kopā ir redzami “4” elementi, kas atbilst norādītajam CSS klases atlasītājam “demo”.
Secinājums
' querySelectorAll() ” metodi var viegli izmantot, kā tās vērtību norādot CSS atlasītāju. Šī metode atbilst katram HTML elementam un atlasa tos, kas atbilst norādītajam atlasītājam. Kad elementi ir atlasīti, tas veic tiem nepieciešamo uzdevumu, kas definēts skripta sadaļā. Šī rokasgrāmata īsi ilustrē metodes “querySelectorAll()” izmantošanu JavaScript.