U JavaScriptu, ' querySelectorAll() ” metoda dohvaća prvi element koji točno odgovara navedenim CSS selektorima. Ova metoda počinje obilaziti DOM stablo da izvrši ovaj zadatak. Nakon što je element pronađen, on primjenjuje ugrađena svojstva JavaScripta ili metode definirane u odjeljku skripte za obavljanje posebnih zadataka. Ova se metoda obično koristi za odabir ciljanih elemenata prema zahtjevima. Omogućuje korisnicima da odaberu sve elemente koji odgovaraju navedenom selektoru ili onom koji se nalazi na danom indeksu.
Ovaj vodič ilustrira upotrebu metode “querySelectorAll()” u JavaScriptu.
Kako koristiti metodu “querySelectorAll()” u JavaScriptu?
Za korištenje ' querySelectorAll() ” navedite CSS selektor kao svoj argument. CSS selektori uključuju 'Tip, Klasa i ID'. Ako je CSS selektor nevažeći, vraća sintaktičku pogrešku, inače vraća statički objekt NodeList kao svoj standardni izlaz.
Sintaksa
document.querySelectorAll ( CSS selektori )
U gornjoj sintaksi, ' CSS selektori ” odnosi se na sve važeće CSS selektore.
Upotrijebimo gore definiranu sintaksu praktično.
HTML kôd
Pregled danog HTML koda:
< h2 razreda = 'demo' > Prvi naslov h2 >< h3 razreda = 'demo' > Drugi naslov h3 >
< str razreda = 'demo' > Prvi paragraf str >
< str razreda = 'demo' > Drugi paragraf str >
< dugme na klik = 'jsFunc()' > Kliknite ovdje ! dugme >
U gornjim redcima koda:
- ' ” dodaje podnaslov koji ima klasu “demo”.
- ' ” definira drugi podnaslov s istom klasom pod nazivom “demo”.
- ' ” oznake ugrađuju iskaze odlomaka koji imaju istu klasu, tj. „demo”.
- '
” uključuje novi gumb s događajem miša “onclick” za izvršavanje funkcije “jsFunc()”.
Bilješka: Određeni HTML kod prati se u ovom vodiču.
Primjer 1: Primjena metode “querySelectorAll()” za odabir elemenata koji imaju istu klasu i promjenu njihovih boja
Ovaj primjer koristi metodu 'querySelectorAll()' za odabir svih elemenata koji koriste klasu 'demo'.
JavaScript kod
Pogledajmo dolje navedeni kod:
< skripta >funkcija jsFunc ( ) {
const lista = document.querySelectorAll ( '.demo' ) ;
za ( neka ja = 0 ; ja < lista.duljina; i++ ) {
popis [ ja ] .style.color = 'narančasto' ;
}
}
skripta >
U gornjim linijama koda:
- ' jsFunc() ” funkcija je definirana.
- U svojoj definiciji, varijabla 'list' koristi ' querySelectorAll() ” za odabir svih elemenata koji imaju klasu “demo”.
- Zatim, ' za ” petlja inicijalizira popis čvorova za ponavljanje duž svih pronađenih HTML elemenata koji imaju klasu “ demo ' i promijenite im boju teksta pomoću ' stil.boja ” vlasništvo.
Izlaz
U gornjem izlazu može se vidjeti da se boja teksta elemenata koji sadrže isto ime klase, tj. 'demo', mijenja nakon klika na gumb.
Primjer 2: Primjena metode “querySelectorAll()” za odabir specifičnih indeksiranih elemenata
Osim svih elemenata, korisnik također može odabrati određeni indeksirani element koji ima klasu 'demo'.
JavaScript kod
Razmotrite dani JavaScript kôd:
< skripta >funkcija jsFunc ( ) {
const lista = document.querySelectorAll ( 'h2.demo' ) ;
popis [ 0 ] .style.color = 'zeleno' ;
}
skripta >
U gornjem isječku koda:
- Varijabla “list” odabire element “h2” čija je klasa “demo” uz pomoć “ querySelectorAll() ” metoda.
- Nakon toga, varijabla “list” specificira indeks elementa “h2” za promjenu boje teksta elementa “H2” postavljenog na indeks “0”.
Izlaz
Izlaz pokazuje da boja teksta elementa 'H2' postavljenog na nulti indeks ima klasu 'demo' promijenjenu nakon klika na gumb.
Primjer 3: Primjena metode “querySelectorAll()” za dobivanje broja elemenata koji imaju istu klasu
Ovaj primjer dohvaća broj elemenata koji imaju istu klasu pomoću metode 'querySelectorAll()'.
HTML kôd
Najprije pogledajte modificirani HTML kôd “Primjera 1”:
< str iskaznica = 'za' > str >
U gore navedenom HTML kodu dodajte prazan odlomak s id-om 'para' na kraju HTML koda 'Primjer 1'.
JavaScript kod
Sada nastavite s JavaScript kodom:
< skripta >funkcija jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'za' ) .innerHTML = nodelist.length;
}
skripta >
Prema gornjem isječku koda:
- Funkcija “jsFunc()” prvo odabire sve elemente “
” koristeći “ querySelectorAll() ” metoda.
- Nakon toga, ' getElementById() ” metoda pristupa dodanom praznom odlomku preko njegovog ID-a “para” kako bi mu dodala vraćenu vrijednost primijenjenog svojstva “duljina”.
Izlaz
Kao što se vidi, gornji izlaz pokazuje ukupno '4' elementa koji odgovaraju navedenom selektoru klase CSS 'demo'.
Zaključak
' querySelectorAll() ” metoda se može jednostavno koristiti navođenjem CSS selektora kao njegove vrijednosti. Ova metoda odgovara svakom HTML elementu i odabire one koji odgovaraju navedenom biraču. Nakon što su elementi odabrani, on na njima izvršava traženi zadatak definiran u odjeljku skripte. Ovaj vodič ukratko je ilustrirao korištenje metode “querySelectorAll()” u JavaScriptu.