En JavaScript, el “ consultaSelectorAll() El método recupera el primer elemento que coincide exactamente con los selectores de CSS especificados. Este método comienza a atravesar el árbol DOM para realizar esta tarea. Una vez que se encuentra el elemento, aplica las propiedades integradas de JavaScript o los métodos definidos en la sección del script para realizar tareas especiales. Este método generalmente se usa para seleccionar los elementos específicos según los requisitos. Permite a los usuarios seleccionar todos los elementos que coincidan con el selector especificado o el particular colocado en el índice dado.
Esta guía ilustra el uso del método 'querySelectorAll()' en JavaScript.
¿Cómo usar el método 'querySelectorAll ()' en JavaScript?
Usar el ' consultaSelectorAll() ”, especifique el selector CSS como su argumento. Los selectores de CSS incluyen 'Tipo, Clase e id'. Si el selector de CSS no es válido, devuelve un error de sintaxis; de lo contrario, devuelve un objeto NodeList estático como salida estándar.
Sintaxis
documento.querySelectorAll ( Selectores de CSS )
En la sintaxis anterior, el ' Selectores de CSS ” se refieren a todos los selectores de CSS válidos.
Usemos la sintaxis definida anteriormente de manera práctica.
código HTML
Descripción general del código HTML dado:
< h2 clase = 'manifestación' > primer encabezado h2 >< h3 clase = 'manifestación' > Segundo encabezado h3 >
< pag clase = 'manifestación' > Primer párrafo pag >
< pag clase = 'manifestación' > Segundo parrafo pag >
< botón al hacer clic = 'jsFunc ()' > Haga clic aquí ! botón >
En las líneas de código anteriores:
- El ' La etiqueta ” agrega un subtítulo que tiene la clase “demo”.
- El ' La etiqueta ” define un segundo subtítulo con la misma clase llamado “demo”.
- El ' Las etiquetas ” incrustan las declaraciones de párrafo que tienen la misma clase, es decir, “demostración”.
- El '
La etiqueta ” incluye un nuevo botón con un evento de mouse “onclick” para ejecutar la función “jsFunc()”.
Nota: El código HTML particular se sigue a lo largo de esta guía.
Ejemplo 1: Aplicar el método “querySelectorAll()” para seleccionar elementos que tengan la misma clase y cambiar sus colores
Este ejemplo utiliza el método “querySelectorAll()” para seleccionar todos los elementos que usan la clase “demo”.
Código JavaScript
Repasemos el código indicado a continuación:
< guion >función jsFunc ( ) {
const lista = documento.querySelectorAll ( '.manifestación' ) ;
para ( dejar yo = 0 ; i < lista.longitud; yo ++ ) {
lista [ i ] .estilo.color = 'rojo naranja' ;
}
}
guion >
En las líneas de código anteriores:
- El ' jsFunc() La función está definida.
- En su definición, la variable 'lista' utiliza el ' consultaSelectorAll() ” para seleccionar todos los elementos que tengan la clase “demo”.
- A continuación, el “ para 'bucle inicializa una lista de nodos para iterar a lo largo de todos los elementos HTML encontrados que tienen la clase' manifestación ” y cambiar su color de texto usando el “ estilo.color ' propiedad.
Producción
En el resultado anterior, se puede ver que el color del texto de los elementos que comprenden el mismo nombre de clase, es decir, 'demostración', cambia al hacer clic en el botón.
Ejemplo 2: Aplicar el método “querySelectorAll()” para seleccionar los elementos indexados específicos
Además de todos los elementos, el usuario también puede seleccionar el elemento indexado específico que tenga la clase 'demo'.
Código JavaScript
Considere el código JavaScript dado:
< guion >función jsFunc ( ) {
const lista = documento.querySelectorAll ( 'h2.demo' ) ;
lista [ 0 ] .estilo.color = 'verde' ;
}
guion >
En el fragmento de código anterior:
- La variable 'list' selecciona el elemento 'h2' cuya clase es 'demo' con la ayuda del ' consultaSelectorAll() ' método.
- Después de eso, la variable 'lista' especifica el índice del elemento 'h2' para cambiar el color del texto del elemento 'H2' colocado en el índice '0'.
Producción
El resultado muestra que el color del texto del elemento 'H2' colocado en el índice cero tiene la clase 'demo' cambiada al hacer clic en el botón.
Ejemplo 3: Aplicar el método “querySelectorAll()” para obtener el número de elementos que tienen la misma clase
Este ejemplo recupera la cantidad de elementos que tienen la misma clase utilizando el método 'querySelectorAll()'.
código HTML
Primero, eche un vistazo al código HTML modificado del “Ejemplo 1”:
< pag identificación = 'para' > pag >
En el código HTML mencionado anteriormente, agregue un párrafo vacío con una identificación 'para' al final del código HTML del 'Ejemplo 1'.
Código JavaScript
Ahora, continúa con el código JavaScript:
< guion >función jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
documento.getElementById ( 'para' ) .innerHTML = lista de nodos.longitud;
}
guion >
De acuerdo con el fragmento de código anterior:
- La función “jsFunc()” primero selecciona todos los elementos “
” usando el “ consultaSelectorAll() ' método.
- Después de eso, el “ getElementById() ” accede al párrafo vacío agregado a través de su id “para” para agregarle el valor devuelto de la propiedad “longitud” aplicada.
Producción
Como se ve, el resultado anterior muestra un total de '4' elementos que coinciden con la 'demostración' del selector de clase CSS especificado.
Conclusión
El ' consultaSelectorAll() El método ” se puede usar fácilmente especificando el selector CSS como su valor. Este método hace coincidir cada elemento HTML y selecciona los que coinciden con el selector especificado. Una vez que se seleccionan los elementos, realiza la tarea requerida sobre ellos definida en la sección de script. Esta guía ilustró brevemente el uso del método 'querySelectorAll()' en JavaScript.