Método querySelector() do Documento do HTML DOM

Definição e uso

querySelector() O método retorna elementos correspondentes ao seletor CSSPrimeiroelementos.

Para retornarTodoscorrespondências (não apenas a primeira correspondência), use querySelectorAll().

Se o seletor for inválido, então querySelector() e querySelectorAll() tudo lança SYNTAX_ERR Exceção.

Exemplo

Exemplo 1

Obtenha o primeiro elemento <p>:

document.querySelector("p");

Experimente você mesmo

Exemplo 2

Obtenha o primeiro elemento com a classe "example":

document.querySelector(".example");

Experimente você mesmo

Exemplo 3

Obtenha o primeiro elemento <p> com a classe "example":

document.querySelector("p.example");

Experimente você mesmo

Exemplo 4

Mude o texto do elemento com id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Experimente você mesmo

Exemplo 5

Escolha o primeiro elemento <p> cujo pai é o elemento <div>:

document.querySelector("div > p");

Experimente você mesmo

Exemplo 6

Escolha o primeiro elemento <a> com o atributo "target":

document.querySelector("a[target]");

Experimente você mesmo

Exemplo 7

Escolha o primeiro <h3> ou o primeiro <h4>:

<h3>Um elemento h3</h3>
<h4>Um elemento h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Experimente você mesmo

Exemplo 8

Escolha o primeiro <h3> ou o primeiro <h4>:

<h4>Um elemento h4</h4>
<h3>Um elemento h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Experimente você mesmo

Sintaxe

document.querySelector(cssSelectors)

Parâmetro

Parâmetro Descrição
cssSelectors

Obrigatório. Um ou mais seletores CSS.

Seletores CSS escolhem elementos HTML com base em id, classe, tipo, atributo, valor de atributo, etc.

Para uma lista completa, acesse nossa Manual de referência do seletor CSS.

Para múltiplos seletores, separe cada seletor com vírgula (veja o exemplo acima na página).

Retorno

Tipo Descrição
Objeto

NodeList contendo o primeiro elemento correspondente ao seletor CSS.

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

Diferença entre HTMLCollection e NodeList

NodeList e HTMLcollection Muito semelhantes.

Ambos são conjuntos de conjuntos de nós (elementos) extraídos do documento, semelhantes a arrays. Os nós podem ser acessados através de índices (subscritores). O índice começa em 0.

Ambos têm length Propriedade, que retorna a quantidade de elementos (conjunto) na lista.

O HTMLCollection éElemento do documentoconjunto.

O NodeList éNodo de documentoconjunto de (nodos de elemento, nodos de atributo e nodos de texto).

Os itens do HTMLCollection podem ser acessados através de seus nomes, id ou índice.

Os itens do NodeList podem ser acessados apenas através de seus números de índice.

O HTMLCollection sempre éEm tempo realconjunto.

Por exemplo: se um elemento <li> for adicionado à lista no DOM, a lista no HTMLCollection também mudará.

O NodeList geralmente éEstáticoconjunto.

Por exemplo: se um elemento <li> for adicionado à lista no DOM, a lista no NodeList não mudará.

getElementsByClassName() e getElementsByTagName() Todos os métodos retornam um HTMLCollection em tempo real.

querySelectorAll() O método retorna um NodeList estático.

childNodes A propriedade retorna um NodeList em tempo real.

Suporte do navegador

document.querySelector() É uma característica do DOM Level 1 (1998).

Todos os navegadores suportam:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial:

Seletor CSS

Manual de referência do seletor CSS

Manual de referência NodeList do HTML DOM

Método QuerySelector:

Método querySelector():

Método querySelectorAll():

Método GetElement:

Método getElementById()

Método getElementsByTagName()

Método getElementsByClassName()