În JavaScript, „ querySelectorAll() ” metoda preia primul element care se potrivește exact cu selectoarele CSS specificate. Această metodă începe să traverseze arborele DOM pentru a efectua această sarcină. Odată ce elementul este găsit, acesta aplică proprietățile sau metodele încorporate JavaScript definite în secțiunea de script pentru a efectua sarcini speciale. Această metodă este de obicei utilizată pentru a selecta elementele vizate conform cerințelor. Permite utilizatorilor să selecteze toate elementele care se potrivesc cu selectorul specificat sau cu cel special plasat la indexul dat.
Acest ghid ilustrează utilizarea metodei „querySelectorAll()” în JavaScript.
Cum să utilizați metoda „querySelectorAll()” în JavaScript?
Pentru a utiliza „ querySelectorAll() ”, specificați selectorul CSS ca argument. Selectoarele CSS includ „Tip, clasă și id”. Dacă selectorul CSS este invalid, returnează o eroare de sintaxă, în caz contrar, returnează un obiect static NodeList ca rezultat standard.
Sintaxă
document.querySelectorAll ( selectoare CSS )
În sintaxa de mai sus, „ selectoare CSS ” se referă la toți selectoarele CSS valide.
Să folosim practic sintaxa definită mai sus.
Cod HTML
Prezentare generală a codului HTML dat:
< h2 clasă = 'demo' > Primul titlu h2 >< h3 clasă = 'demo' > Al doilea titlu h3 >
< p clasă = 'demo' > Primul paragraf p >
< p clasă = 'demo' > Al doilea paragraf p >
< buton onclick = „jsFunc()” > Click aici ! buton >
În rândurile de cod de mai sus:
- „ Eticheta ” adaugă un subtitlu având clasa „demo”.
- „ Eticheta ” definește un al doilea subtitlu cu aceeași clasă numită „demo”.
- „ Etichetele ” încorporează instrucțiunile de paragraf având aceeași clasă, adică „demo”.
- „
Eticheta include un buton nou cu un eveniment de mouse „onclick” pentru a executa funcția „jsFunc()”.
Notă: Codul HTML specific este urmat pe tot parcursul acestui ghid.
Exemplul 1: aplicarea metodei „querySelectorAll()” pentru a selecta elemente care au aceeași clasă și a le schimba culorile
Acest exemplu utilizează metoda „querySelectorAll()” pentru a selecta toate elementele care folosesc clasa „demo”.
Cod JavaScript
Să trecem în revistă codul de mai jos:
< scenariu >funcţie jsFunc ( ) {
const list = document.querySelectorAll ( „.demo” ) ;
pentru ( lăsa i = 0 ; i < listă.lungime; i++ ) {
listă [ i ] .stil.culoare = 'portocaliu rosu' ;
}
}
scenariu >
În liniile de cod de mai sus:
- „ jsFunc() ” este definită funcția.
- În definiția sa, variabila „listă” utilizează „ querySelectorAll() ” pentru a selecta toate elementele care au clasa “demo”.
- În continuare, „ pentru ” bucla inițializează o listă de noduri pentru a repeta de-a lungul tuturor elementelor HTML găsite având clasa “ demonstrație ” și schimbați culoarea textului folosind „ stil.culoare ” proprietate.
Ieșire
În rezultatul de mai sus, se poate observa că culoarea textului elementelor care cuprind același nume de clasă, adică „demo” este schimbată la clic pe butonul.
Exemplul 2: Aplicarea metodei „querySelectorAll()” pentru a selecta elementele indexate specifice
În afară de toate elementele, utilizatorul poate selecta și elementul indexat specific având clasa „demo”.
Cod JavaScript
Luați în considerare codul JavaScript dat:
< scenariu >funcţie jsFunc ( ) {
const list = document.querySelectorAll ( „h2.demo” ) ;
listă [ 0 ] .stil.culoare = 'verde' ;
}
scenariu >
În fragmentul de cod de mai sus:
- Variabila „listă” selectează elementul „h2” a cărui clasă este „demo” cu ajutorul „ querySelectorAll() ” metoda.
- După aceea, variabila „listă” specifică indexul elementului „h2” pentru a schimba culoarea textului elementului „H2” plasat la indicele „0”.
Ieșire
Rezultatul arată că culoarea textului elementului „H2” plasat la indexul zero are clasa „demo” schimbată la clic pe butonul.
Exemplul 3: Aplicarea metodei „querySelectorAll()” pentru a obține numărul de elemente care au aceeași clasă
Acest exemplu preia numărul de elemente care au aceeași clasă folosind metoda „querySelectorAll()”.
Cod HTML
Mai întâi, aruncați o privire la codul HTML modificat din „Exemplu 1”:
< p id = 'pentru' > p >
În codul HTML menționat mai sus, adăugați un paragraf gol cu un id „para” la sfârșitul codului HTML „Exemplu 1”.
Cod JavaScript
Acum, continuați cu codul JavaScript:
< scenariu >funcţie jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'pentru' ) .innerHTML = nodelist.length;
}
scenariu >
Conform fragmentului de cod de mai sus:
- Funcția „jsFunc()” selectează mai întâi toate elementele „
” folosind „ querySelectorAll() ” metoda.
- După aceea, „ getElementById() ” accesează paragraful gol adăugat prin id-ul său „para” pentru a-l adăuga cu valoarea returnată a proprietății „lungime” aplicată.
Ieșire
După cum s-a văzut, rezultatul de mai sus arată un total de „4” elemente care se potrivesc cu selectorul de clasă CSS specificat „demo”.
Concluzie
„ querySelectorAll() ” poate fi utilizată cu ușurință prin specificarea selectorului CSS ca valoare. Această metodă se potrivește cu fiecare element HTML și le selectează pe cele care se potrivesc cu selectorul specificat. Odată selectate elementele, efectuează sarcina necesară asupra lor definită în secțiunea de script. Acest ghid a ilustrat pe scurt utilizarea metodei „querySelectorAll()” în JavaScript.