HTML DOM querySelectorAll() Método

Ejemplo

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

// 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";

Más ejemplos de "Pruébelo usted mismo" a continuación.

Definición y uso

El método querySelectorAll() devuelve una colección de elementos secundarios de un elemento que coinciden con un selector CSS específico, como un objeto NodeList estático.

El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.

Sugerencia: puede usar la propiedad de longitud del objeto NodeList para determinar la cantidad de nodos secundarios que coinciden con el selector especificado, luego puede recorrer todos los nodos y extraer la información que desea.

Para obtener más información sobre los selectores de CSS, visite nuestro Tutorial de selectores de CSS y nuestra Referencia de selectores de CSS .

Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Nota: Internet Explorer 8 admite selectores CSS2. IE9 y versiones posteriores también son compatibles con CSS3.

Sintaxis

element.querySelectorAll(CSS selectors)

Valores paramétricos

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Detalles técnicos

Versión DOM:	Selectores Objeto de documento de nivel 1
Valor devuelto:	Un objeto NodeList, que representa todos los elementos descendientes del elemento actual que coincide con uno o más selectores de CSS especificados. NodeList es una colección estática, lo que significa que los cambios en el DOM NO tienen efecto en la colección. Nota: lanza una excepción SYNTAX_ERR si los selectores especificados no son válidos

Más ejemplos

Ejemplo

Obtenga todos los elementos <p> dentro de un elemento <div> y establezca el color de fondo del primer elemento <p> (índice 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";

Ejemplo

Obtenga todos los elementos <p> en un <div> con class="example", y configure el fondo del primer elemento <p>:

// 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";

Ejemplo

Averigüe cuántos elementos con class="example" hay en un elemento <div> (utilizando la propiedad de longitud 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;

Ejemplo

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

// 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";
}

Ejemplo

Establezca el color de fondo de todos los elementos <p> en un elemento <div>:

// 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";
}

Ejemplo

Establezca el estilo de borde de todos los elementos <a> en un elemento <div> que tenga un atributo "objetivo":

// 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";
}

Ejemplo

Establezca el color de fondo de todos los elementos <h2>, <div> y <span> en un elemento <div>:

// 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";
}