HTML DOM querySelectorAll()Método

Document 对象参考手册Objeto Document

Ejemplo

Obtener todos los elementos con class="example" en el documento:

var x = document.querySelectorAll(".example");

Pruébalo »

Definición y uso

El método querySelectorAll() devuelve todos los elementos del documento que coinciden con el selector CSS especificado, devolviendo unNodeListobjeto.

El objeto NodeList representa una colección de nodos. Se puede acceder mediante índice, comenzando desde 0.

Consejo:Puedes usar la propiedad del objeto NodeList lengthpara obtener los atributos de los elementos que coinciden con el selector, y luego recorrer todos los elementos para obtener la información que deseas.

Para más selectores CSS, consultaTutorial de selectores CSS ， Manual de referencia de selectores CSS。

Soporte del navegador

Los números en la tabla indican la primera versión del navegador que soporta este método.

Método
querySelectorAll() 4.0 8.0 3.5 3.2 10.0

Nota:Internet Explorer 8 soporta selectores CSS2. Los navegadores IE9 y versiones posteriores ya soportan selectores CSS3.

Sintaxis

elementList = document.querySelectorAll(selectors);
  • elementList es un objeto estático de tipo NodeList.
  • selectors es una cadena que contiene uno o más selectores CSS separados por comas.

Valores del parámetro

Parámetro Tipo Descripción
Selector CSS String Obligatorio. Especifica uno o más elementos que coincidan con selectores CSS. Se pueden usar id, class, tipo, atributo, valor de atributo, etc. como selectores para obtener elementos.

Los múltiples selectores se separan con comas (,).

Consejo:Para más contenido sobre selectores CSS, consultaManual de referencia de selectores CSS。

Método

Versión DOM: Level 1 Document Object
Valor de retorno: Un objeto NodeList que representa todos los elementos del documento que coinciden con el selector CSS especificado. NodeList es un objeto estático de tipo NodeList. Si el selector especificado no es válido, se lanza una excepción SYNTAX_ERR.

Más ejemplos

Ejemplo

Obtener todos los elementos <p> del documento y establecer el color de fondo del primer elemento <p> coincidente (índice 0):

//Obtener todos los elementos <p> del documento var x = document.querySelectorAll("p"); //Establecer el color de fondo del primer elemento <p> x[0].style.backgroundColor = "red";

Pruébalo »

Ejemplo

Obtener todos los elementos <p> con class="example" del documento y establecer el color de fondo del primer elemento <p> coincidente (índice 0):

//Obtener todos los elementos <p> con class="example" del documento var x = document.querySelectorAll("p.example"); //Establecer el color de fondo del primer elemento <p> con class="example" x[0].style.backgroundColor = "red";

Pruébalo »

Ejemplo

Contar el número de elementos <p> con class="example" en el documento (usando la propiedad length del objeto NodeList):

var x = document.querySelectorAll(".example").length;

Pruébalo »

Ejemplo

Establecer el color de fondo de todos los elementos con class="example" en el documento:

var x = document.querySelectorAll(".example"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }

Pruébalo »

Ejemplo

Establecer el color de fondo de todos los elementos <p> del documento:

var x = document.querySelectorAll("p"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }

Pruébalo »

Ejemplo

Buscar todas las etiquetas <a> del documento que contengan el atributo "target" y establecerles un borde:

var x = document.querySelectorAll("a[target]"); var i; for (i = 0; i < x.length; i++) { x[i].style.border = "10px solid red"; }

Pruébalo »

Ejemplo

Buscar cada elemento <p> cuyo elemento padre sea <div> y establecerle un color de fondo:

var x = document.querySelectorAll("div > p"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }

Pruébalo »

Ejemplo

Establecer el color de fondo de todos los elementos <h2>, <div> y <span> del documento:

var x = document.querySelectorAll("h2, div, span"); var i; for (i = 0; i < x.length; i++) { x[i].style.backgroundColor = "red"; }

Pruébalo »

Artículos relacionados

Tutorial de CSS:Selectores CSS

Manual de referencia de CSS:Manual de referencia de selectores CSS

Tutorial de JavaScript:Lista de nodos de HTML DOM en JavaScript

Manual de referencia de HTML DOM:document.querySelector()

Manual de referencia de HTML DOM:element.querySelectorAll()

Document 对象参考手册Objeto Document

Otras extensiones