HTML DOM querySelector() Method

Exemplo

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

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

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

O querySelector() retorna o primeiro elemento filho que corresponda a um CSS especificado selector(s) de um elemento.

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.

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

element .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 1 elemento de objeto
Valor de retorno:	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

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

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

Tente você mesmo "

Exemplo

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

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

Tente você mesmo "

Exemplo

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

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

Tente você mesmo "

Exemplo

Adicionar uma borda vermelha ao primeiro <a> elemento que tem um atributo de destino dentro de um <div> elemento:

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

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 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";

Tente você mesmo "

No entanto, se o <h3> elemento foi colocado antes do <h2> elemento em <div> . O <h3> elemento é o que vai ter a cor de fundo vermelho.

<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";

Tente você mesmo "