Método querySelectorAll() do Element DOM HTML

Definição e uso

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

NodeList

A NodeList é uma coleção de nós do tipo array (lista).

Os nós na lista podem ser acessados por índice (índice). O índice começa em 0.

O atributo length retorna o número de nós na lista.

Veja também:

Manual de referência:

Atributo classList

Atributo className

Método querySelector()

Método getElementsByTagName()

Método getElementsByClassName()

Objeto Style HTML DOM

Tutorial:

Sintaxe do CSS

Seletor do CSS

Manual de referência do seletor do CSS

Exemplo

Exemplo 1

Definir a cor de fundo do primeiro elemento class="example" dentro do elemento <div>:

// Obter o elemento (div) com id="myDIV" e depois obter todos os elementos dentro do div com class="example"
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Definir a cor de fundo do primeiro elemento class="example" (índice 0) dentro do div
x[0].style.backgroundColor = "red";

Experimente você mesmo

Dica:Mais exemplos estão disponíveis na parte inferior da página.

Sintaxe

element.querySelectorAll(cssSelectors)

Parâmetros

Parâmetros Descrição
cssSelectors

Obrigatório. String. Define um ou mais seletores CSS para coincidir com os elementos.

Seletores CSS são usados para escolher elementos HTML com base em id, classe, tipo, atributo, valor de atributo, etc.

Para múltiplos seletores, use vírgula para separá-los.

Dica:Para uma lista completa de todos os seletores CSS, consulte nossa Manual de referência do seletor do CSS.

Detalhes técnicos

Retorno:

O objeto NodeList representa todos os elementos descendentes que correspondem ao seletor CSS especificado.

A NodeList é uma coleção estática, o que significa que as mudanças no DOM não afetam a coleção.

Atenção:Se o seletor especificado for inválido, lança a exceção SYNTAX_ERR
Versão do DOM: Documentação de Níveis de Selectores

Mais exemplos

Exemplo 2

Obter todos os elementos <p> dentro do elemento <div> e definir a cor de fundo do primeiro <p> (índice 0):

// Obter o elemento com id="myDIV" (div), e, em seguida, obter todos os elementos p dentro do div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Definir a cor de fundo do primeiro <p> (índice 0) dentro do div
x[0].style.backgroundColor = "red";

Experimente você mesmo

Exemplo 3

Obter todos os elementos <p> com class="example" dentro do <div> e definir o fundo do primeiro <p>:

// Obter o elemento com id="myDIV" (div), e, em seguida, obter todos os elementos p com class="example" dentro do div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Definir a cor de fundo do primeiro elemento <p> com class="example" dentro do div (índice 0)
x[0].style.backgroundColor = "red";

Experimente você mesmo

Exemplo 4

Descobrir quantos elementos com class="example" há dentro do elemento <div> (usando a propriedade length do objeto NodeList):

/* Obter o elemento com id="myDIV" (div), e, em seguida, obter todos os elementos p com class="example" dentro do div, retornar o número de elementos encontrados */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Experimente você mesmo

Exemplo 5

Definir a cor de fundo de todos os elementos class="example" dentro do elemento <div>:

// Obter o elemento com id="myDIV" (div), e, em seguida, obter todos os elementos com class="example" dentro do div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Criar um loop for e definir a cor de fundo de todos os elementos class="example" dentro do div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Experimente você mesmo

Exemplo 6

Definir a cor de fundo de todos os elementos <p> dentro do elemento <div>:

// Obter o elemento com id="myDIV" (div), e, em seguida, obter todos os elementos p dentro do div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Criar um loop for e definir a cor de fundo de todos os elementos p dentro do div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Experimente você mesmo

Exemplo 7

Definir o estilo da borda dos elementos <a> com atributo target dentro do elemento <div>:

// Obter o elemento com id="myDIV" (div), e, em seguida, obter todos os elementos <a> com atributo "target" dentro do div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Crie um loop for e defina a borda de todos os elementos <a> com a propriedade target dentro do div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Experimente você mesmo

Exemplo 8

Defina a cor de fundo de todos os elementos <h2>, <div> e <span> dentro do <div>:

// Obtenha o elemento com id="myDIV" (div) e obtenha todos os elementos <h2>, <div> e <span> dentro do <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Crie um loop for e defina a cor de fundo de todos os elementos <h2>, <div> e <span> dentro de <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta completamente o método.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 3.2 10.0

Atenção:O Internet Explorer 8 suporta seletores CSS2. As versões 9 e posteriores também suportam CSS3.

Páginas relacionadas

Tutorial de CSS:Seletor do CSS

Manual de referência do CSS:Manual de referência do seletor do CSS

Tutorial de JavaScript:Lista de nós do HTML DOM do JavaScript

Manual de referência do JavaScript:element.querySelector()

Manual de referência do HTML DOM:document.querySelectorAll()