Método querySelectorAll() do Documento do HTML DOM

Definição e uso

querySelectorAll() O método retorna todos os elementos que correspondem ao seletor CSS.

querySelectorAll() O método retorna NodeList.

Se o seletor for inválido, então querySelectorAll() O método lança SYNTAX_ERR Exceção.

Exemplo

Exemplo 1

Selecionar todos os elementos com class="example":

document.querySelectorAll(".example");

Experimente você mesmo

Exemplo 2

Adicionar cor de fundo ao primeiro elemento <p>:

const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Experimente você mesmo

Exemplo 3

Adicionar cor de fundo ao primeiro elemento <p> com class="example":

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Experimente você mesmo

Exemplo 4

Número de elementos com class="example":

let numb = document.querySelectorAll(".example").length;

Experimente você mesmo

Exemplo 5

Definir a cor de fundo de todos os elementos com class="example":

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Experimente você mesmo

Exemplo 6

Defina a cor de fundo de todos os elementos <p>.

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Experimente você mesmo

Exemplo 7

Defina a borda de todos os elementos <a> que usam o atributo "target".

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

Experimente você mesmo

Exemplo 8

Defina a cor de fundo de cada elemento <p> que é filho de um elemento <div>.

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Experimente você mesmo

Exemplo 9

Defina a cor de fundo de todos os elementos <h3>, <div> e <span>.

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Experimente você mesmo

Sintaxe

document.querySelectorAll(seletorescss)

Parâmetro

Parâmetro Descrição
seletorescss

Obrigatório. Um ou mais seletores CSS.

Seletor CSS escolhe elementos HTML com base em id, classe, tipo, atributo, valor de atributo, etc.

Para uma lista completa, acesse nossa Manual de referência de seletores CSS.

Para múltiplos seletores, use vírgula para separá-los (veja o exemplo acima).

Retorno

Tipo Descrição
Objeto

Objeto NodeList contendo elementos que correspondem a um seletor CSS.

Se não encontrar correspondências, retorna um objeto NodeList vazio.

Diferenças entre HTMLCollection e NodeList

NodeList e HTMLcollection muito semelhantes.

os dois são conjuntos de nós (elementos) semelhantes a arrays extraídos do documento. Os nós podem ser acessados por meio de índices (subíndices). O índice começa em 0.

os dois têm length um atributo que retorna a quantidade de elementos na lista (conjunto).

HTMLCollection éo elemento de documentocoleção.

A NodeList éNodo de Documentoconjunto de (nodos de elemento, nodos de atributo e nodos de texto).

Os itens da HTMLCollection podem ser acessados por meio de seus nomes, id ou índice.

Os itens da NodeList podem ser acessados apenas por meio de seus números de índice.

A HTMLCollection sempre éem tempo realcoleção.

Por exemplo: se um elemento <li> for adicionado à lista no DOM, a lista na HTMLCollection também mudará.

A NodeList geralmente éEstáticacoleção.

Por exemplo: se um elemento <li> for adicionado à lista no DOM, a lista na NodeList não mudará.

getElementsByClassName() e getElementsByTagName() Os métodos retornam uma HTMLCollection em tempo real.

querySelectorAll() O método retorna uma NodeList estática.

childNodes A propriedade retorna uma NodeList em tempo real.

Suporte do Navegador

document.querySelectorAll() É uma característica do DOM Level 3 (2004).

Todos os navegadores suportam:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte

Páginas Relacionadas

Tutorial:

Seletores CSS

Manual de referência de seletores CSS

Tutorial de NodeList do JavaScript

Método QuerySelector:

Método querySelector() do Elemento

Método querySelectorAll() do Elemento

Método querySelector() do Documento

Método querySelectorAll() do Documento

Método GetElement:

Método getElementById() do Documento

Método getElementsByTagName() do Documento

Método getElementsByClassName() do Documento