En JavaScript, el ' querySelectorAll() ” recupera el primer element que coincideix exactament amb els selectors CSS especificats. Aquest mètode comença a recórrer l'arbre DOM per realitzar aquesta tasca. Un cop trobat l'element, aplica les propietats o mètodes integrats de JavaScript definits a la secció d'scripts per realitzar tasques especials. Aquest mètode s'utilitza normalment per seleccionar els elements objectiu segons els requisits. Permet als usuaris seleccionar tots els elements que coincideixen amb el selector especificat o el particular situat a l'índex donat.
Aquesta guia il·lustra l'ús del mètode 'querySelectorAll()' a JavaScript.
Com utilitzar el mètode 'querySelectorAll()' a JavaScript?
Per utilitzar el ' querySelectorAll() ”, especifiqueu el selector CSS com a argument. Els selectors de CSS inclouen 'Tipus, classe i identificador'. Si el selector CSS no és vàlid, retorna un error de sintaxi, en cas contrari, retorna un objecte NodeList estàtic com a sortida estàndard.
Sintaxi
document.querySelectorAll ( Selectors CSS )
En la sintaxi anterior, el ' Selectors CSS ” fa referència a tots els selectors CSS vàlids.
Utilitzem pràcticament la sintaxi definida anteriorment.
Codi HTML
Visió general del codi HTML donat:
< h2 classe = 'demo' > Primer títol h2 >< h3 classe = 'demo' > Segon títol h3 >
< pàg classe = 'demo' > Primer paràgraf pàg >
< pàg classe = 'demo' > Segon paràgraf pàg >
< botó fent clic = 'jsFunc()' > Clica aquí ! botó >
A les línies de codi anteriors:
- El ' ” afegeix un subtítol amb la classe “demo”.
- El ' ” defineix un segon subtítol amb la mateixa classe anomenada “demo”.
- El ' Les etiquetes incorporen les declaracions de paràgraf amb la mateixa classe, és a dir, 'demo'.
- El '
L'etiqueta inclou un botó nou amb un esdeveniment del ratolí 'onclick' per executar la funció 'jsFunc()'.
Nota: El codi HTML concret es segueix al llarg d'aquesta guia.
Exemple 1: aplicació del mètode 'querySelectorAll()' per seleccionar elements que tenen la mateixa classe i canviar els seus colors
Aquest exemple utilitza el mètode 'querySelectorAll()' per seleccionar tots els elements que utilitzen la classe 'demo'.
Codi JavaScript
Anem a veure el codi que s'indica a continuació:
< guió >funció jsFunc ( ) {
const list = document.querySelectorAll ( '.demo' ) ;
per ( deixar i = 0 ; i < llista.longitud; i++ ) {
llista [ i ] .estil.color = 'taronja' ;
}
}
guió >
A les línies de codi anteriors:
- El ' jsFunc() ” es defineix la funció.
- En la seva definició, la variable 'llista' utilitza el ' querySelectorAll() ” mètode per seleccionar tots els elements que tenen la classe “demo”.
- A continuació, el ' per ” bucle inicialitza una llista de nodes per iterar al llarg de tots els elements HTML trobats amb la classe “ demostració ' i canvieu el color del text amb el ' estil.color ' propietat.
Sortida
A la sortida anterior, es pot veure que el color del text dels elements que comprenen el mateix nom de classe, és a dir, 'demo' es canvia en fer clic al botó.
Exemple 2: aplicació del mètode 'querySelectorAll()' per seleccionar els elements indexats específics
A part de tots els elements, l'usuari també pot seleccionar l'element indexat específic amb la classe 'demo'.
Codi JavaScript
Considereu el codi JavaScript donat:
< guió >funció jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
llista [ 0 ] .estil.color = 'verd' ;
}
guió >
Al fragment de codi anterior:
- La variable 'llista' selecciona l'element 'h2' la classe del qual és 'demo' amb l'ajuda del ' querySelectorAll() ” mètode.
- Després d'això, la variable 'llista' especifica l'índex de l'element 'h2' per canviar el color del text de l'element 'H2' situat a l'índex '0'.
Sortida
La sortida mostra que el color del text de l'element 'H2' situat a l'índex zero té la classe 'demo' canviada en fer clic al botó.
Exemple 3: aplicació del mètode 'querySelectorAll()' per obtenir el nombre d'elements que tenen la mateixa classe
Aquest exemple recupera el nombre d'elements que tenen la mateixa classe mitjançant el mètode 'querySelectorAll()'.
Codi HTML
Primer, mireu el codi HTML modificat de 'Exemple 1':
< pàg id = 'per' > pàg >
Al codi HTML indicat anteriorment, afegiu un paràgraf buit amb un identificador 'para' al final del codi HTML 'Exemple 1'.
Codi JavaScript
Ara, continueu amb el codi JavaScript:
< guió >funció jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'per' ) .innerHTML = nodelist.length;
}
guió >
Segons el fragment de codi anterior:
- La funció 'jsFunc()' selecciona primer tots els elements '
' mitjançant el ' querySelectorAll() ” mètode.
- Després d'això, el ' getElementById() ” accedeix al paràgraf buit afegit a través del seu id “para” per afegir-lo amb el valor retornat de la propietat “longitud” aplicada.
Sortida
Com s'ha vist, la sortida anterior mostra un total de '4' elements que coincideixen amb el selector de classe CSS especificat 'demo'.
Conclusió
El ' querySelectorAll() ” es pot utilitzar fàcilment especificant el selector CSS com a valor. Aquest mètode coincideix amb cada element HTML i selecciona els que coincideixen amb el selector especificat. Un cop seleccionats els elements, realitza la tasca requerida sobre ells definida a la secció de guió. Aquesta guia va il·lustrar breument l'ús del mètode 'querySelectorAll()' a JavaScript.