Método querySelector() do Element DOM HTML

Definição e uso

querySelector() O método retorna o primeiro filho do elemento que coincide com o seletor CSS especificado.

Atenção:

querySelector() O método retorna apenas o primeiro elemento que coincide com o seletor especificado. Para retornar todos os itens coincidentes, use Método querySelectorAll().

Veja também:

Manual de referência:

Atributo classList

Atributo className

Método querySelectorAll()

Método getElementsByTagName()

Método getElementsByClassName()

Objeto Style do HTML DOM

Tutorial:

Sintaxe CSS

Seletores CSS

Manual de referência de seletores CSS

Exemplo

Exemplo 1

Alterar o texto do primeiro filho do <div> com class="example":

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Experimente você mesmo

Mais exemplos estão disponíveis na parte inferior da página.

Sintaxe

element.querySelector(CSSselectors)

Parâmetros

Parâmetros Descrição
CSSselectors

Obrigatório. String. Especifique um ou mais seletores CSS para coincidir com os elementos.

Os seletores CSS são usados para selecionar elementos HTML com base em id, classe, tipo, atributo, valor de atributo, etc.

Para múltiplos seletores, separe cada seletor com uma vírgula.

O elemento retornado depende do primeiro elemento encontrado no documento (veja os "Mais exemplos" abaixo).

Dica:Para uma lista completa de seletores CSS, consulte nossa Manual de referência de seletores CSS.

Detalhes técnicos

Retorno:

Corresponde ao primeiro elemento que coincide com o seletor CSS especificado.

Se não encontrar correspondências, retorna null.

Se o seletor especificado for inválido, lança uma exceção SYNTAX_ERR.
Versão do DOM: Objeto de Elemento Nível 1 Selectores

Mais exemplos

Exemplo 2

Alterar o texto do primeiro <p> elemento dentro do <div>:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Experimente você mesmo

Exemplo 3

Alterar o texto do primeiro <p> elemento com class="example" dentro do <div>:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Experimente você mesmo

Exemplo 4

Alterar o texto do elemento <div> com id="demo":

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Experimente você mesmo

Exemplo 5

Adicione uma borda vermelha de 10px sólida ao primeiro elemento <a> com a propriedade target dentro do elemento <div>:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Experimente você mesmo

Exemplo 6

Este exemplo demonstra como os seletores múltiplos funcionam.

Suponha que você tenha dois elementos: elementos <h2> e <h3>.

O seguinte código adicionará a cor de fundo ao primeiro elemento <h2> dentro do <div>:

<div id="myDIV">
  <h2>Um elemento h2</h2>
  <h3>Um elemento h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Experimente você mesmo

Exemplo 7

Mas, se o elemento <h3> dentro do <div> for colocado antes do elemento <h2>, o <h3> obterá a cor de fundo vermelha.

<div id="myDIV">
  <h3>Um elemento h3</h3>
  <h2>Um elemento h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a versão do navegador que suporta completamente o método.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Páginas relacionadas

Tutorial de CSS:Seletores CSS

Manual de referência do CSS:Manual de referência de seletores CSS

Tutorial de JavaScript:Lista de nós do HTML DOM do JavaScript

Manual de referência do JavaScript:document.querySelector()

Manual de referência do JavaScript:element.querySelectorAll()

Manual de referência do HTML DOM:document.querySelectorAll()