Método HTML DOM querySelectorAll()

Exemplo

Defina a cor de fundo do primeiro elemento com class="example" dentro de um 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";

Mais exemplos de "Experimente você mesmo" abaixo.

Definição e uso

O método querySelectorAll() retorna uma coleção de elementos filho de um elemento que correspondem a um seletor CSS especificado, como um objeto NodeList estático.

O objeto NodeList representa uma coleção de nós. Os nós podem ser acessados por números de índice. O índice começa em 0.

Dica: Você pode usar a propriedade length do objeto NodeList para determinar o número de nós filho que corresponde ao seletor especificado, então você pode percorrer todos os nós e extrair as informações desejadas.

Para obter mais informações sobre seletores de CSS, visite nosso Tutorial de seletores de CSS e nossa Referência de seletores de CSS .

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.

Method
querySelectorAll()	4.0	9.0	3.5	3.2	10.0

Observação: o Internet Explorer 8 tem suporte para seletores CSS2. IE9 e versões posteriores também têm suporte para CSS3.

Sintaxe

element.querySelectorAll(CSS selectors)

Valores de parâmetro

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.

Detalhes técnicos

Versão DOM:	Objeto de documento de nível 1 de seletores
Valor de retorno:	Um objeto NodeList, representando todos os elementos descendentes do elemento atual que corresponde a um seletor CSS especificado. A NodeList é uma coleção estática, o que significa que alterações no DOM NÃO têm efeito na coleção. Nota: Lança uma exceção SYNTAX_ERR se o(s) seletor(es) especificado(s) for(em) inválido(s)

Mais exemplos

Exemplo

Obtenha todos os elementos <p> dentro de um elemento <div> e defina a cor de fundo do primeiro 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";

Exemplo

Obtenha todos os elementos <p> em um <div> com class="example" e defina o plano de fundo do primeiro 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";

Exemplo

Descubra quantos elementos com class="example" existem em um elemento <div> (usando a propriedade length do 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;

Exemplo

Defina a cor de fundo de todos os elementos com class="example" em um 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";
}

Exemplo

Defina a cor de fundo de todos os elementos <p> em um 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";
}

Exemplo

Defina o estilo da borda de todos os elementos <a> em um elemento <div> que tenha um atributo "target":

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

Exemplo

Defina a cor de fundo de todos os elementos <h2>, <div> e <span> em um 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";
}