Método querySelectorAll() del Documento del DOM HTML

Definición y uso

querySelectorAll() El método devuelve todos los elementos que coinciden con el selector de CSS.

querySelectorAll() El método devuelve un NodeList.

Si el selector es inválido, querySelectorAll() El método lanzará SYNTAX_ERR Excepción.

Ejemplo

Ejemplo 1

Seleccionar todos los elementos con class="example":

document.querySelectorAll(".example");

Prueba por tu cuenta

Ejemplo 2

Agregar color de fondo al primer elemento <p>:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Prueba por tu cuenta

Ejemplo 3

Agregar color de fondo al primer elemento <p> con class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Prueba por tu cuenta

Ejemplo 4

Número de elementos con class="example":

let numb = document.querySelectorAll(".example").length;

Prueba por tu cuenta

Ejemplo 5

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

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

Prueba por tu cuenta

Ejemplo 6

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

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

Prueba por tu cuenta

Ejemplo 7

Establecer el borde de todos los elementos <a> que utilizan la propiedad "target":

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

Prueba por tu cuenta

Ejemplo 8

Establecer el color de fondo de cada elemento <p> que es hijo directo de un elemento <div>:

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

Prueba por tu cuenta

Ejemplo 9

Establecer el color de fondo de todos los elementos <h3>, <div> y <span>:

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Prueba por tu cuenta

Sintaxis

document.querySelectorAll(CSSselectors)

Parámetros

Parámetros Descripción
CSSselectors

Obligatorio. Un o varios selectores CSS.

El selector CSS selecciona elementos HTML según el id, la clase, el tipo, las propiedades, los valores de las propiedades, etc.

Para obtener una lista completa, visite nuestra Manual de referencias de selectores CSS.

Para múltiples selectores, utilice comas para separar cada selector (véase el ejemplo superior).

Valor devuelto

Tipo Descripción
Objeto

Objeto NodeList que contiene elementos que coinciden con un selector CSS.

Si no se encuentra ningún elemento coincidente, se devuelve un objeto NodeList vacío.

La diferencia entre HTMLCollection y NodeList

NodeList y HTMLcollection Muy similares.

Ambos son conjuntos de nodos (elementos) extraídos del documento, similares a un array. Los nodos se pueden acceder mediante un índice (subíndice). El índice comienza en 0.

Ambos tienen length una propiedad que devuelve la cantidad de elementos en la lista (conjunto).

HTMLCollection eselemento de documentoconjunto.

La NodeList esNodo de documentoconjunto de (nodos de elemento, nodos de atributo y nodos de texto).

Los elementos de HTMLCollection se pueden acceder a través de su nombre, id o número de índice.

Los elementos de NodeList solo se pueden acceder a través de su número de índice.

La HTMLCollection siempre esEn tiempo realconjunto.

Por ejemplo: si se agrega un elemento <li> a la lista en el DOM, la lista en HTMLCollection también cambiará.

La NodeList generalmente esEstáticaconjunto.

Por ejemplo: si se agrega un elemento <li> a la lista en el DOM, la lista en NodeList no cambiará.

getElementsByClassName() y getElementsByTagName() Todos los métodos devuelven una HTMLCollection en tiempo real.

querySelectorAll() El método devuelve una NodeList estática.

childNodes La propiedad devuelve una NodeList en tiempo real.

Compatibilidad del navegador

document.querySelectorAll() Es una característica del DOM Level 3 (2004).

Se admite en todos los navegadores:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte

Páginas relacionadas

Tutoriales:

Selectores CSS

Manual de referencias de selectores CSS

Tutoriales de NodeList de JavaScript

Método QuerySelector:

Método querySelector() del Elemento

Método querySelectorAll() del Elemento

Método querySelector() del Documento

Método querySelectorAll() del Documento

Método GetElement:

Método getElementById() del Documento

Método getElementsByTagName() del Documento

Método getElementsByClassName() del Documento