Método querySelectorAll() do HTML DOM

Objeto Documento do HTML DOM

querySelectorAll()Retorna uma lista de elementos no documento que correspondem ao grupo de seletores especificado (usando uma busca em profundidade e preorder no nó do documento). O objeto retornado é NodeList .

Os elementos no NodeList retornado são ordenados pela ordem em que aparecem no código-fonte.

O NodeList retornado pode ser acessado por meio do número de índice. O índice começa em 0.

NodeList é uma coleção estática, o que significa que as mudanças no DOM não são válidas para essa coleção.

Use a propriedade length do NodeList para determinar o número de elementos que correspondem ao seletor especificado, e então você pode percorrer todos os elementos e extrair a informação necessária.

Sintaxe:

document.querySelectorAll(selectors)

document.querySelectorAll("div");

Compatibilidade do navegador

Os números na tabela especificam a primeira versão do navegador que suporta completamente o método querySelectorAll():

Valor do parâmetro

Detalhes técnicos

Mais Exemplos

Obter todos os elementos com class="demo":

document.querySelectorAll(".demo");

Este exemplo retorna a lista de todos os elementos <div> com a classe "note":

document.querySelectorAll("div.note");

Definir a cor de fundo de todos os<h1>，<p>和<div>元素的背景色：

document.querySelectorAll("h1,　p,　div");

Referências Relacionadas

Tutorial CSS:Selector CSS

Referência CSS:CSS#idSelector

Referência CSS: CSS .class Selector

DOM Document querySelector() Métodos

DOM Document getElementsByClassName() Métodos

DOM Document getElementsByTagName() Métodos

Objeto Documento do HTML DOM