Documento HTML DOM querySelectorAll()
Exemplo
Selecione todos os elementos com class="example":
document.querySelectorAll(".example");
Mais exemplos abaixo.
Definição e uso
O querySelectorAll()
método retorna todos os elementos que correspondem a um(s) seletor(es) CSS.
O querySelectorAll()
método retorna um NodeList .
O querySelectorAll()
método lança uma exceção SYNTAX_ERR se os seletores forem inválidos
Tutoriais:
O tutorial de seletores de CSS
O tutorial da lista de nós JavaScript
Métodos do QuerySelector:
O método querySelector() do elemento
O método querySelectorAll() do elemento
O método do documento querySelector()
O método Document querySelectorAll()
Métodos GetElement:
O método document getElementById()
HTML DOM NodeList / HTMLCollection
As diferenças entre um HTMLCollection e um NodeList
Uma NodeList e uma HTMLCollection são coleções semelhantes a arrays (listas) de nós (elementos) extraídos de um documento. Os nós podem ser acessados por números de índice. O índice começa em 0.
Ambos os objetos possuem uma propriedade length que retorna o número de elementos na lista.
Um HTMLCollection é uma coleção ativa : se você adicionar um elemento <li> a uma lista no DOM, a lista no HTMLCollection também será alterada.
Uma NodeList é uma coleção estática : se você adicionar um elemento <li> a uma lista no DOM, a lista em NodeList não será alterada.
Os métodos getElementsByClassName()
e getElementsByTagName()
retornam um HTMLCollection.
Os
métodos querySelector()
e retornam um NodeList.querySelectorAll()
Sintaxe
document.querySelectorAll(CSS selectors)
Parâmetros
Parameter | Description |
CSS selectors | Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Valor de retorno
Modelo | Descrição |
Objeto | Um NodeList com os elementos que correspondem aos seletores CSS. Se nenhuma correspondência for encontrada, null é retornado. |
Mais exemplos
Adicione uma cor de fundo ao primeiro elemento <p>:
const nodeList= document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";
Adicione uma cor de fundo ao primeiro elemento <p> com class="example":
const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";
Número de elementos com class="example":
let numb = document.querySelectorAll(".example").length;
Defina 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";
}
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";
}
Defina a borda de todos os elementos <a> com um atributo "target":
const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.border = "10px solid red";
}
Defina a cor de fundo de cada elemento <p> onde o pai é um elemento <div>:
const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
nodeList[i].style.backgroundColor = "red";
}
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";
}
Suporte ao navegador
document.querySelectorAll()
é um recurso do DOM Nível 3 (2004).
É totalmente suportado em todos os navegadores:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |