tutoriais mais recente desenvolvimento web
 

HTML DOM querySelectorAll() Method

<Document Object

Exemplo

Obter todos os elementos no documento com class = "exemplo":

var x = document.querySelectorAll(".example");
Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

O querySelectorAll() método devolve todos os elementos no documento que corresponde a um CSS especificado selector(s) , como um objecto NodeList estático.

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 elementos que combina com o seletor especificado, então você pode percorrer todos os elementos 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

document.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 no documento que corresponde ao 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. Gera uma exceção SYNTAX_ERR se o selector(s) é inválido
Exemplos

mais Exemplos

Exemplo

Obter todos <p> elementos no documento, e definir a cor do primeiro fundo <p> elemento (index 0) :

// Get all <p> elements in the document
var x = document.querySelectorAll("p");

// Set the background color of the first <p> element
x[0].style.backgroundColor = "red"; 
Tente você mesmo "

Exemplo

Obter todos <p> elementos no documento com class = "exemplo" e defina o fundo da primeira <p> elemento:

// Get all <p> elements in the document with class="example"
var x = document.querySelectorAll("p.example");

// Set the background color of the first <p> element with class="example" (index 0)
x[0].style.backgroundColor = "red"; 
Tente você mesmo "

Exemplo

Descubra como muitos elementos com class = "exemplo" existem no documento (usando a propriedade comprimento do objeto NodeList):

var x = document.querySelectorAll(".example").length;
Tente você mesmo "

Exemplo

Defina a cor de todos os elementos no documento com class = "exemplo" background:

var x = document.querySelectorAll(".example");
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 no documento:

var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Tente você mesmo "

Exemplo

Definir a fronteira de todos os <a> elementos no documento que tem um "target" atributo:

var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}
Tente você mesmo "

Exemplo

Defina a cor de cada fundo <p> elemento onde o pai é um <div> elemento:

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Tente você mesmo "

Exemplo

Defina a cor de todo o fundo <h2>, <div> e <span> elementos no documento:

var x = document.querySelectorAll("h2, div, span");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
Tente você mesmo "

Páginas relacionadas

Tutorial CSS: CSS Seletores

Referência CSS: CSS Seletores de Referência

JavaScript Tutorial: Lista JavaScript HTML DOM Node

HTML DOM Referência: documento. querySelector()

HTML DOM Referência: elemento. querySelectorAll()

<Document Object