Consulta de documento HTML DOMSelectorAll()
Ejemplo
Selecciona todos los elementos con class="example":
document.querySelectorAll(".example");
Más ejemplos a continuación.
Definición y uso
El querySelectorAll()
método devuelve todos los elementos que coinciden con un selector CSS.
El querySelectorAll()
método devuelve una NodeList .
El querySelectorAll()
método arroja una excepción SYNTAX_ERR si los selectores no son válidos
Tutoriales:
La referencia de selectores de CSS
Tutorial de la lista de nodos de JavaScript
Métodos de QuerySelector:
El método Element querySelector()
El método Element querySelectorAll()
El método QuerySelector() del documento
El método QuerySelectorAll() del documento
Métodos GetElement:
El método getElementById() del documento
Lista de nodos HTML DOM/Colección HTML
Las diferencias entre una HTMLCollection y una NodeList
Una NodeList y una HTMLCollection son colecciones (listas) de nodos (elementos) en forma de matriz extraídas de un documento. Se puede acceder a los nodos por números de índice. El índice comienza en 0.
Ambos objetos tienen una propiedad de longitud que devuelve el número de elementos de la lista.
Una HTMLCollection es una colección en vivo : si agrega un elemento <li> a una lista en el DOM, la lista en la HTMLCollection también cambiará.
Una NodeList es una colección estática : si agrega un elemento <li> a una lista en el DOM, la lista en NodeList no cambiará.
Los métodos getElementsByClassName()
y getElementsByTagName()
devuelven una HTMLCollection.
Los métodos querySelector()
y querySelectorAll()
devuelven una lista de nodos.
Sintaxis
document.querySelectorAll(CSS selectors)
Parámetros
Parameter | Description |
CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Valor devuelto
Escribe | Descripción |
Objeto | Una lista de nodos con los elementos que coinciden con los selectores de CSS. Si no se encuentran coincidencias, null se devuelve. |
Más ejemplos
Agregue un color de fondo al primer elemento <p>:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Agrega un color de fondo al primer elemento <p> con class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Número de elementos con class="example":
let numb = document.querySelectorAll(".example").length;
Establece 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";
}
Establezca 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";
}
Establezca el borde de todos los elementos <a> con un atributo "objetivo":
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Establece el color de fondo de cada elemento <p> donde el padre es un elemento <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
Establezca 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";
}
Compatibilidad con navegador
document.querySelectorAll()
es una característica DOM Nivel 3 (2004).
Es totalmente compatible con todos los navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |