Método querySelectorAll() del Documento del DOM HTML
- Página anterior
- Página siguiente
- Volver a la capa superior Documents 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");
Ejemplo 2
Agregar color de fondo al primer elemento <p>:
const nodeList= document.querySelectorAll("p"); nodeList[0].style.backgroundColor = "red";
Ejemplo 3
Agregar color de fondo al primer elemento <p> con class="example":
const nodeList = document.querySelectorAll("p.example"); nodeList[0].style.backgroundColor = "red";
Ejemplo 4
Número de elementos con class="example":
let numb = document.querySelectorAll(".example").length;
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"; }
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"; }
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"; }
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"; }
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"; }
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:
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
- Página anterior
- Página siguiente
- Volver a la capa superior Documents del DOM HTML