Ejemplo
Obtener todos los elementos en el documento con class = "ejemplo":
var x =
document.querySelectorAll(".example"); Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El querySelectorAll() método devuelve todos los elementos del documento que coincide con un CSS especificado selector(s) , como un objeto NodeList estática.
El objeto NodeList representa una colección de nodos. Los nodos pueden ser accedidos por números de índice. El índice comienza en 0.
Consejo: Puede utilizar la longitud de la propiedad del objeto NodeList para determinar el número de elementos que coincide con el selector especificado, entonces se puede recorrer todos los elementos y extraer la información que desee.
Para obtener más información acerca de CSS Selectores, visite nuestro CSS Selectores Tutorial y nuestro CSS Selectores de referencia .
Soporte del navegador
Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| querySelectorAll() | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Nota: Internet Explorer 8 tiene soporte para los selectores CSS2. IE9 y versiones posteriores tienen soporte para CSS3 también.
Sintaxis
document.querySelectorAll( CSS selectors )Los valores de los parámetros
| Parámetro | Tipo | Descripción |
|---|---|---|
| CSS selectors | String | Necesario. Especifica uno o más selectores CSS para que coincida con el elemento. Estos se utilizan para seleccionar elementos HTML basado en su documento de identidad, clases, tipos, atributos, valores de atributos, etc. Para múltiples selectores, separar cada selector con una coma. Consejo: Para obtener una lista de todos los selectores CSS, visita nuestra CSS Selectores de referencia . |
Detalles técnicos
| DOM Versión: | Nivel 1 selectores de objetos de documento |
|---|---|
| Valor de retorno: | Un objeto NodeList, que representa a todos los elementos del documento que coincide con el CSS especificado selector(s) . El NodeList es una colección estática, lo que significa que los cambios en el DOM no tiene ningún efecto en la colección. Emitirá una excepción SYNTAX_ERR si el selector(s) no es válido |
Más ejemplos
Ejemplo
Obtener todos los <p> elementos en el documento, y establecer el color de fondo de la primera <p> elemento (index 0) :
// Get all <p> elements in the document
var x =
document.querySelectorAll("p");
// Set the
background color of the first <p> element
x[0].style.backgroundColor = "red"; Inténtalo tú mismo " Ejemplo
Obtener todos los <p> elementos en el documento con class = "ejemplo", y establecer el fondo de la primera <p> elemento:
// Get all <p> elements in the document with class="example"
var x =
document.querySelectorAll("p.example");
// Set the
background color of the first <p> element with class="example" (index
0)
x[0].style.backgroundColor = "red"; Inténtalo tú mismo " Ejemplo
Averiguar cuántos elementos con class = "ejemplo" que hay en el documento (con la propiedad length del objeto NodeList):
var x =
document.querySelectorAll(".example").length; Inténtalo tú mismo " Ejemplo
Ajuste el color de fondo de todos los elementos en el documento con class = "ejemplo":
var x = document.querySelectorAll(".example");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Inténtalo tú mismo " Ejemplo
Ajuste el color de fondo de todos los <p> elementos en el documento:
var x = document.querySelectorAll("p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Inténtalo tú mismo " Ejemplo
Establece el borde de todos los <a> elementos del documento que tienen un "target" atributo:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.border = "10px solid red";
} Inténtalo tú mismo " Ejemplo
Ajuste el color de fondo de cada <p> elemento en el que el padre es un <div> elemento:
var x = document.querySelectorAll("div > p");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Inténtalo tú mismo " Ejemplo
Ajuste el color de fondo de todos <h2>, <div> y <span> elementos en el documento:
var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0;
i < x.length; i++) {
x[i].style.backgroundColor =
"red";
} Inténtalo tú mismo " Páginas relacionadas
Tutorial CSS: CSS Selectores
CSS Referencia: CSS Selectores de referencia
JavaScript Tutorial: Lista JavaScript HTML DOM nodo
HTML DOM Referencia: documento. querySelector()
HTML DOM Referencia: elemento. querySelectorAll()