Exemplo
Obter o primeiro elemento no documento com class = "exemplo":
document.querySelector(".example"); Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
O querySelector() retorna o primeiro elemento que corresponde a um CSS especificado selector(s) no documento.
Nota: O querySelector() método apenas retorna o primeiro elemento que coincide com os selectores especificados. Para retornar todos os jogos, use o querySelectorAll() método em vez.
Se o selector corresponde a uma ID no documento que é usada várias vezes (Note que um "id" deve ser único dentro de uma página e não deve ser utilizado mais de uma vez), ele retorna o primeiro elemento correspondente.
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 | |||||
|---|---|---|---|---|---|
| querySelector() | 4.0 | 8 | 3,5 | 3.2 | 10.0 |
Sintaxe
document.querySelector( 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. O elemento retornado depende de qual elemento que é encontrado pela primeira vez no documento (See "More Examples") . 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, que representa o primeiro elemento que coincide com o CSS especificado selector(s) . Se nenhuma correspondência for encontrada, será retornado nulo. Gera uma exceção SYNTAX_ERR se o especificado selector(s) é inválido. |
mais Exemplos
Exemplo
Obter o primeiro <p> elemento no documento com class = "exemplo":
document.querySelector("p.example"); Tente você mesmo " Exemplo
Alterar o texto de um elemento com id = "demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Tente você mesmo " Exemplo
Obter o primeiro <p> elemento no documento onde o pai é um <div> elemento.
document.querySelector("div > p"); Tente você mesmo " Exemplo
Obter o primeiro <a> elemento no documento que tem um "target" atributo:
document.querySelector("a[target]"); Tente você mesmo " Exemplo
Este exemplo demonstra como múltiplos seletores trabalhar.
Suponha que você tem dois elementos: um <h2> e um <h3> elemento.
O código a seguir irá adicionar uma cor de fundo para a primeira <h2> elemento no documento:
<h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2,
h3").style.backgroundColor = "red"; Tente você mesmo " No entanto, se o <h3> elemento foi colocado antes do <h2> elemento no documento. O <h3> elemento é o que vai ter a cor de fundo vermelho.
<h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2,
h3").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
JavaScript Referência: elemento. querySelector()
HTML DOM Referência: documento. querySelectorAll()
JavaScript Referência: elemento. querySelectorAll()