Documento HTML DOM querySelector()
Exemplos
Obtenha o primeiro elemento <p>:
document.querySelector("p");
Obtenha o primeiro elemento com class="example":
document.querySelector(".example");
Mais exemplos abaixo.
Definição e uso
O querySelector()método retorna o primeiro elemento que corresponde a um seletor CSS.
Para retornar todas as correspondências (não apenas a primeira), use o querySelectorAll()método em vez disso.
Ambos querySelector()e querySelectorAll()retornam um NodeList .
Ambos querySelector()e querySelectorAll()lançam uma exceção SYNTAX_ERR se os seletores forem inválidos.
Tutoriais:
O tutorial de seletores de CSS
O tutorial da lista de nós JavaScript
Métodos do QuerySelector:
O método querySelector() do elemento
O método querySelectorAll() do elemento
O método do documento querySelector()
O método Document querySelectorAll()
Métodos GetElement:
O método document getElementById()
HTML DOM NodeList / HTMLCollection
As diferenças entre um HTMLCollection e um NodeList
Uma NodeList e uma HTMLCollection são coleções semelhantes a arrays (listas) de nós (elementos) extraídos de um documento. Os nós podem ser acessados por números de índice. O índice começa em 0.
Ambos os objetos possuem uma propriedade length que retorna o número de elementos na lista.
Um HTMLCollection é uma coleção ativa : se você adicionar um elemento <li> a uma lista no DOM, a lista no HTMLCollection também será alterada.
Uma NodeList é uma coleção estática : se você adicionar um elemento <li> a uma lista no DOM, a lista em NodeList não será alterada.
Os métodos getElementsByClassName()e getElementsByTagName()
retornam um HTMLCollection.
Os
métodos querySelector()e retornam um NodeList.querySelectorAll()
Sintaxe
document.querySelector(CSS selectors)
Parâmetros
| Parameter | Description |
| CSS selectors |
Required. One or more CSS selectors. CSS selectors select HTML elements based on id, classes, types, attributes, values of attributes etc. For a full list, go to our CSS Selectors Reference. For multiple selectors, separate each selector with a comma (See "More Examples"). |
Valor de retorno
| Modelo | Descrição |
| Objeto | Um NodeList com o primeiro elemento que corresponde ao(s) seletor(es) CSS. Se nenhuma correspondência for encontrada, nullé retornado. |
Mais exemplos
Obtenha o primeiro elemento <p> com class="example":
document.querySelector("p.example");
Altere o texto do elemento com id="demo":
document.querySelector("#demo").innerHTML = "Hello World!";
Selecione o primeiro elemento <p> com o pai como um elemento <div>.
document.querySelector("div > p");
Selecione o primeiro elemento <a> que possui um atributo "target":
document.querySelector("a[target]");
Selecione o primeiro <h3> ou o primeiro <h4>:
<h3>A h3 element</h3>
<h4>A h4 element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";
Selecione o primeiro <h3> ou o primeiro <h4>:
<h4>A h4 element</h4>
<h3>A h3 element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";
Suporte ao navegador
document.querySelector()é um recurso DOM Nível 1 (1998).
É totalmente suportado em todos os navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |