A JavaScriptben a „ querySelectorAll() ” metódus lekéri a legelső elemet, amely pontosan megfelel a megadott CSS-szelektoroknak. Ez a módszer megkezdi a DOM-fa bejárását a feladat végrehajtásához. Miután megtalálta az elemet, speciális feladatok végrehajtásához alkalmazza a script szakaszban meghatározott JavaScript beépített tulajdonságait vagy metódusait. Ezt a módszert általában a megcélzott elemek igény szerinti kiválasztására használják. Lehetővé teszi a felhasználók számára, hogy kiválasszák az összes olyan elemet, amely megfelel a megadott szelektornak vagy az adott indexen elhelyezettnek.
Ez az útmutató a „querySelectorAll()” metódus használatát mutatja be JavaScriptben.
Hogyan kell használni a „querySelectorAll()” metódust JavaScriptben?
A „ querySelectorAll() ” metódusban adja meg argumentumként a CSS-választót. A CSS-választók közé tartozik a „Típus, osztály és azonosító”. Ha a CSS-választó érvénytelen, akkor szintaktikai hibát ad vissza, ellenkező esetben egy statikus NodeList objektumot ad vissza standard kimenetként.
Szintaxis
document.querySelectorAll ( CSS-választók )
A fenti szintaxisban a „ CSS-választók ” hivatkozik az összes érvényes CSS-választóra.
Használjuk gyakorlatiasan a fentebb definiált szintaxist.
HTML kód
Az adott HTML kód áttekintése:
< h2 osztály = 'demó' > Első címsor h2 >< h3 osztály = 'demó' > Második címsor h3 >
< p osztály = 'demó' > Első bekezdés p >
< p osztály = 'demó' > Második bekezdés p >
< gomb kattintásra = 'jsFunc()' > Kattints ide ! gomb >
A fenti kódsorokban:
- A ' ” címke egy „demo” osztályú alcímet ad hozzá.
- A ' ” címke egy második alcímet határoz meg ugyanazzal az osztállyal, „demo” néven.
- A ' ” címkék beágyazzák az azonos osztályú, azaz „demó” bekezdésutasításokat.
- A '
” címke tartalmaz egy új gombot egy „onclick” egéreseménnyel a „jsFunc()” függvény végrehajtásához.
Jegyzet: Ebben az útmutatóban az adott HTML-kódot követjük.
1. példa: A „querySelectorAll()” módszer alkalmazása azonos osztályú elemek kiválasztására és színük megváltoztatására
Ez a példa a „querySelectorAll()” metódust használja a „demo” osztályt használó összes elem kiválasztásához.
JavaScript kód
Tekintsük át az alábbi kódot:
< forgatókönyv >funkció jsFunc ( ) {
const list = document.querySelectorAll ( '.demó' ) ;
számára ( hagyja i = 0 ; én < list.length; i++ ) {
lista [ én ] .style.color = 'narancsvörös' ;
}
}
forgatókönyv >
A fenti kódsorokban:
- A ' jsFunc() ” függvény van definiálva.
- Definíciójában a „lista” változó a „ querySelectorAll() ” metódussal kiválaszthatja a „demo” osztályú összes elemet.
- Ezután a „ számára ' ciklus inicializál egy csomópontlistát az összes talált HTML elem mentén, amelyeknek az osztálya ' demó ', és módosítsa a szöveg színét a ' stílus.szín ' ingatlan.
Kimenet
A fenti kimeneten látható, hogy az azonos osztálynevet, azaz „demo”-t tartalmazó elemek szövegszíne gombkattintásra megváltozik.
2. példa: A „querySelectorAll()” módszer alkalmazása a konkrét indexelt elemek kiválasztásához
Az összes elemen kívül a felhasználó kiválaszthatja az adott indexelt elemet is, amelynek osztálya „demo”.
JavaScript kód
Tekintsük a megadott JavaScript kódot:
< forgatókönyv >funkció jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
lista [ 0 ] .style.color = 'zöld' ;
}
forgatókönyv >
A fenti kódrészletben:
- A „lista” változó a „demo” osztályú „h2” elemet választja ki a „ querySelectorAll() ” módszerrel.
- Ezt követően a „lista” változó megadja a „h2” elem indexét a „0” indexnél elhelyezett „H2” elem szövegszínének megváltoztatásához.
Kimenet
A kimenet azt mutatja, hogy a nulla indexre helyezett „H2” elem szövegszíne a „demo” osztályú gombkattintásra megváltozott.
3. példa: A „querySelectorAll()” módszer alkalmazása az azonos osztályú elemek számának lekéréséhez
Ez a példa lekéri az azonos osztályú elemek számát a „querySelectorAll()” metódussal.
HTML kód
Először is nézze meg az „1. példa” módosított HTML-kódját:
< p id = 'for' > p >
A fent említett HTML-kódban az „1. példa” HTML-kód végéhez fűzzön egy üres bekezdést „para” azonosítóval.
JavaScript kód
Most folytassa a JavaScript kóddal:
< forgatókönyv >funkció jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'for' ) .innerHTML = nodelist.length;
}
forgatókönyv >
A fenti kódrészlet szerint:
- A „jsFunc()” függvény először kiválasztja az összes „
” elemet a „ querySelectorAll() ” módszerrel.
- Ezt követően a „ getElementById() ” metódus eléri a hozzáadott üres bekezdést a „para” azonosítóján keresztül, és hozzáfűzi az alkalmazott „length” tulajdonság visszaadott értékéhez.
Kimenet
Mint látható, a fenti kimenet összesen „4” elemet mutat, amelyek megfelelnek a megadott CSS-osztályválasztó „demónak”.
Következtetés
A ' querySelectorAll() ” metódus könnyen használható, ha értékeként a CSS-választót adjuk meg. Ez a módszer minden HTML-elemhez illeszkedik, és kiválasztja azokat, amelyek megfelelnek a megadott választónak. Az elemek kijelölése után elvégzi rajtuk a szkript szakaszban meghatározott szükséges feladatot. Ez az útmutató röviden bemutatta a „querySelectorAll()” metódus használatát JavaScriptben.