Método HTML DOM querySelector()

Exemplo

Altere o texto do primeiro elemento filho com class="example" em um elemento <div>:

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

Mais exemplos de "Experimente você mesmo" abaixo.

Definição e uso

O método querySelector() retorna o primeiro elemento filho que corresponde a um seletor CSS especificado de um elemento.

Observação: o método querySelector() retorna apenas o primeiro elemento que corresponde aos seletores especificados. Para retornar todas as correspondências, use o método querySelectorAll() .

Para obter mais informações sobre seletores de CSS, visite nosso Tutorial de seletores de CSS e nossa Referência de seletores de CSS .

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

Sintaxe

element.querySelector(CSS selectors)

Valores de parâmetro

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Detalhes técnicos

Versão DOM:	Objeto de Elemento de Nível 1 de Seletores
Valor de retorno:	O primeiro elemento que corresponde aos seletores CSS especificados. Se nenhuma correspondência for encontrada, null será retornado. Lança uma exceção SYNTAX_ERR se os seletores especificados forem inválidos.

Mais exemplos

Exemplo

Altere o texto do primeiro elemento <p> em um elemento <div>:

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

Exemplo

Altere o texto do primeiro elemento <p> com class="example" em um elemento <div>:

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

Exemplo

Altere o texto de um elemento com id="demo" em um elemento <div>:

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

Exemplo

Adicione uma borda vermelha ao primeiro elemento <a> que tenha um atributo target dentro de um elemento <div>:

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

Exemplo

Este exemplo demonstra como vários seletores funcionam.

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

O código a seguir adicionará uma cor de fundo ao primeiro elemento <h2> em <div>:

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

No entanto, se o elemento <h3> foi colocado antes do elemento <h2> em <div>. O elemento <h3> é aquele que ficará com a cor de fundo vermelha.

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";