Método querySelectorAll() del HTML DOM

Objeto Documento de HTML DOM

querySelectorAll()Devuelve una lista de elementos del documento que coinciden con el grupo de selectores especificados (realiza un recorrido en profundidad del primer orden de los nodos del documento). El objeto devuelto es NodeList .

Los elementos en el NodeList devuelto se ordenan según su orden de aparición en el código fuente.

El NodeList devuelto se puede acceder mediante el número de índice. El índice comienza en 0.

NodeList es una colección estática, lo que significa que los cambios en el DOM no son válidos para esta colección.

Para determinar el número de elementos que tienen un selector específico utilizando la propiedad length del NodeList, luego puede recorrer todos los elementos y extraer la información necesaria.

Sintaxis：

document.querySelectorAll(selectors)

document.querySelectorAll("div");

Compatibilidad del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente el método querySelectorAll()：

Valor del parámetro

Detalles técnicos

Más ejemplos

Obtener todos los elementos con class="demo":

document.querySelectorAll(".demo");

Este ejemplo devuelve una lista de todos los elementos <div> que tienen la clase "note":

document.querySelectorAll("div.note");

Establecer el color de fondo de todos los <h1>，<p> y <div> elementos de color de fondo:

document.querySelectorAll("h1,　p,　div");

Referencias relacionadas

Tutoriales CSS:Selector CSS

Referencia CSS:CSS#idSelector

Referencia CSS: CSS .class Selector

DOM Document querySelector() Métodos

DOM Document getElementsByClassName() Métodos

DOM Document getElementsByTagName() Métodos

Objeto Documento de HTML DOM