HTML DOM querySelectorAll() Method

Exemplo

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

Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

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

O objecto NodeList representa um conjunto de nodos. Os nódulos podem ser acedidos por números de índice. O índice começa em 0.

Dica: Você pode usar o comprimento propriedade do objeto NodeList para determinar o número de nós filho que combina com o seletor especificado, então você pode percorrer todos os nós e extrair a informação que deseja.

Para mais informações sobre CSS seletores, visite o nosso CSS Seletores Tutorial e nossa CSS Seletores de referência .

Suporte navegador

Os números na tabela especifica a primeira versão do navegador que suporta totalmente o método.

Método
querySelectorAll()	4.0	9	3,5	3.2	10.0

Nota: Internet Explorer 8 tem suporte para seletores CSS2. IE9 e versões posteriores tem suporte para CSS3 também.

Sintaxe

element .querySelectorAll( CSS selectors )

Os valores dos parâmetros

Parâmetro	Tipo	Descrição
CSS selectors	String	Requeridos. Especifica um ou mais seletores CSS para combinar com o elemento. Estes são usados para selecionar elementos HTML com base em sua identificação, classes, tipos, atributos, valores de atributos, etc. Para vários selectores, separar cada selector com uma vírgula. Dica: Para obter uma lista de todos os CSS seletores, vá para a CSS Seletores de referência .

Detalhes técnicos

DOM Versão:	Seletores Nível Objeto 1 Documento
Valor de retorno:	Um objecto NodeList, representando todos os elementos descendentes do elemento de corrente que corresponde a um CSS especificado selector(s) . O NodeList é uma coleção estática, o que significa que mudanças no DOM não tem efeito na coleção. Nota: Gera uma exceção SYNTAX_ERR se o especificado selector(s) é inválido

mais Exemplos

Exemplo

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

Tente você mesmo "

Exemplo

Obter todos <p> elementos em um <div> com class = "exemplo" e defina o fundo da primeira <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";

Tente você mesmo "

Exemplo

Descubra como muitos elementos com class = "exemplo" existem em um <div> elemento (usando a propriedade comprimento 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;

Tente você mesmo "

Exemplo

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

Tente você mesmo "

Exemplo

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

Tente você mesmo "

Exemplo

Defina o estilo de borda de todos os <a> elementos em um <div> elemento que tem um "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";
}

Tente você mesmo "

Exemplo

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

Tente você mesmo "