Método querySelectorAll() del Elemento DOM HTML

Definición y uso

querySelectorAll() El método devuelve una colección de elementos hijos que coinciden con el selector CSS, como objeto NodeList estático.

NodeList

NodeList es una colección de nodos que se parece a un array (lista).

Los nodos en la lista se pueden acceder mediante índice (subíndice). El índice comienza en 0.

La propiedad length devuelve el número de nodos en la lista.

Véase también:

Manual de referencia:

Atributo classList

Atributo className

Método querySelector()

Método getElementsByTagName()

Método getElementsByClassName()

Objeto Style de HTML DOM

Tutoriales:

Sintaxis de CSS

Selector de CSS

Manual de referencia de selector de CSS

Ejemplo

Ejemplo 1

Establecer el color de fondo del primer elemento con clase="example" dentro del elemento <div>:

// Obtener el elemento con id="myDIV" (div), luego obtener todos los elementos con clase="example" dentro de div
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Establecer el color de fondo del primer elemento (índice 0) con clase="example" dentro de div
x[0].style.backgroundColor = "red";

Intente hacerlo usted mismo

Consejo:Más ejemplos se proporcionan en la parte inferior de la página.

Sintaxis

element.querySelectorAll(cssSelectors)

Parámetros

Parámetros Descripción
cssSelectors

Obligatorio. String. Especifica uno o más selectores CSS para coincidir con los elementos.

Los selectores CSS se utilizan para seleccionar elementos HTML según el id, clase, tipo, atributo, valor de atributo, etc.

Para múltiples selectores, separar cada selector con una coma.

Consejo:Para una lista de todos los selectores CSS, consulte nuestra Manual de referencia de selector de CSS.

Detalles técnicos

Valor de retorno:

El objeto NodeList representa todos los elementos descendientes que coinciden con el selector CSS.

NodeList es una colección estática, lo que significa que los cambios en el DOM no tienen efecto en la colección.

Nota:Si el selector especificado no es válido, se lanza la excepción SYNTAX_ERR
Versión de DOM: Documentación de Selectores Nivel 1 Document Object

Más ejemplos

Ejemplo 2

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

// Obtener el elemento (div) con id="myDIV" y luego obtener todos los elementos p dentro de div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Establecer el color de fondo del primer <p> (índice 0) dentro de div
x[0].style.backgroundColor = "red";

Intente hacerlo usted mismo

Ejemplo 3

Obtener todos los elementos <p> con clase="example" dentro de <div>, y establecer el fondo del primer <p>:

// Obtener el elemento (div) con id="myDIV" y luego obtener todos los elementos p con class="example" dentro de div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Establecer el color de fondo del primer elemento <p> con class="example" (índice 0) dentro de div
x[0].style.backgroundColor = "red";

Intente hacerlo usted mismo

Ejemplo 4

Encontrar cuántos elementos con class="example" hay dentro del elemento <div> (usando la propiedad length del objeto NodeList):

/* Obtener el elemento (div) con id="myDIV" y luego obtener todos los elementos p con class="example" dentro de div, devolver la cantidad de elementos encontrados */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Intente hacerlo usted mismo

Ejemplo 5

Establecer el color de fondo para todos los elementos class="example" dentro del elemento <div>:

// Obtener el elemento (div) con id="myDIV" y luego obtener todos los elementos con class="example" dentro de div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Crear un bucle for y establecer el color de fondo para todos los elementos class="example" dentro de div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Intente hacerlo usted mismo

Ejemplo 6

Establecer el color de fondo para todos los elementos <p> dentro del elemento <div>:

// Obtener el elemento (div) con id="myDIV" y luego obtener todos los elementos p dentro de div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Crear un bucle for y establecer el color de fondo de todos los elementos p dentro de div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Intente hacerlo usted mismo

Ejemplo 7

Establecer el estilo de borde para todos los elementos <a> con atributo target dentro del elemento <div>:

// Obtener el elemento (div) con id="myDIV" y luego obtener todos los elementos <a> con atributo "target" dentro de div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Crear un ciclo for y establecer el borde de todos los elementos <a> con atributo target en div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Intente hacerlo usted mismo

Ejemplo 8

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

// Obtener el elemento con id="myDIV" (div) y obtener todos los elementos <h2>, <div> y <span> dentro de <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Crear un ciclo for y establecer el color de fondo de todos los elementos <h2>, <div> y <span> en <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Intente hacerlo usted mismo

Compatibilidad del navegador

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Nota:Internet Explorer 8 admite selectores CSS2. Las versiones de IE9 y superiores también admiten CSS3.

Páginas relacionadas

Tutoriales de CSS:Selector de CSS

Manual de referencia de CSS:Manual de referencia de selector de CSS

Tutoriales de JavaScript:Lista de nodos HTML DOM de JavaScript

Manual de referencia de JavaScript:element.querySelector()

Manual de referencia del HTML DOM:document.querySelectorAll()