HTML DOM querySelectorAll() Method

Ejemplo

Ajuste el color de fondo del primer elemento con class = "ejemplo" dentro de un <div> elemento:

// Get the element with id="myDIV" (a div), then get all elements inside div with class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Set the background color of the first element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Inténtalo tú mismo "

Más "Try it Yourself" ejemplos a continuación.

Definición y Uso

El querySelectorAll() método devuelve una colección de elementos secundarios de un elemento que coincidan con un determinado CSS 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 nodos secundarios que coincide con el selector especificado, entonces se puede recorrer todos los nodos 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

element .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 descendientes del elemento actual que coincide con un 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. Nota: Lanza una excepción si el SYNTAX_ERR especificada selector(s) no es válido

Más ejemplos

Ejemplo

Obtener todos los <p> elementos dentro de un <div> elemento, y establecer el color de fondo de la primera <p> elemento (index 0) :

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Set the background color of the first <p> element (index 0) in div
x[0].style.backgroundColor = "red";

Inténtalo tú mismo "

Ejemplo

Obtener todos los <p> elementos en un <div> con class = "ejemplo", y establecer el fondo de la primera <p> elemento:

// Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0) in div
x[0].style.backgroundColor = "red";

Inténtalo tú mismo "

Ejemplo

Averiguar cuántos elementos con class = "ejemplo" que hay en un <div> elemento (usando la propiedad length del objeto NodeList):

/* Get the element with id="myDIV" (a div), then get all p elements with class="example" inside div, and return the number of elements found */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Inténtalo tú mismo "

Ejemplo

Ajuste el color de fondo de todos los elementos con class = "ejemplo" en un <div> elemento:

// Get the element with id="myDIV" (a div), then get all elements with class="example" inside div
var x = document.getElementById("myDIV").querySelectorAll(".example");

// Create a for loop and set the background color of all elements with class="example" in div
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 un <div> elemento:

// Get the element with id="myDIV" (a div), then get all p elements inside div
var x = document.getElementById("myDIV").querySelectorAll("p");

// Create a for loop and set the background color of all p elements in div
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Inténtalo tú mismo "

Ejemplo

Establecer el estilo de borde de todos los <a> elementos en un <div> elemento que tiene un "target" atributo:

// Get the element with id="myDIV" (a div), then get all <a> elements with a "target" attribute inside div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");

// Create a for loop and set the border of all <a> elements with a target attribute in div
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 todos <h2>, <div> y <span> elementos en un <div> elemento:

// Get the element with id="myDIV" (a div), then get all <h2>, <div> and <span> elements inside <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");

// Create a for loop and set the background color of all <h2>, <div> and <span> elements in <div>
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}

Inténtalo tú mismo "