Frontend Academy · Aula

querySelector e querySelectorAll

Encontre um ou vários elementos usando strings de seletores CSS e entenda a diferença entre NodeList e HTMLCollection.

querySelector e querySelectorAll é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O que é o DOM?

O Modelo de Objetos do Documento é uma árvore de objetos JavaScript que representa a estrutura HTML. O JavaScript interage com o DOM para ler, modificar, adicionar e remover elementos, tornando as páginas da web dinâmicas.

getElementById

O seletor clássico. document.getElementById('myId') retorna o elemento com esse identificador ou null se ele não for encontrado. É rápido, mas funciona apenas com identificadores.

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — elemento único

document.querySelector(cssSelector) retorna o primeiro elemento que corresponde a qualquer seletor CSS. Retorna null se nenhum for encontrado. É mais flexível que getElementById.

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — vários elementos

document.querySelectorAll(cssSelector) retorna uma NodeList estática com todos os elementos correspondentes. Ela não é uma matriz dinâmica — é necessário iterá-la. Use Array.from() ou a sintaxe de expansão para usar métodos de matriz.

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

Consultas com escopo

É possível chamar querySelector em qualquer elemento para pesquisar somente dentro dessa subárvore, e não no documento inteiro. Isso é mais eficiente e evita selecionar acidentalmente elementos de outras partes da página.

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeList em comparação com a coleção HTML

NodeList (de querySelectorAll) é estática: reflete o DOM no momento da consulta. A coleção HTML (de getElementsByClassName etc.) é dinâmica: atualiza-se automaticamente conforme o DOM muda. Ambas têm formato semelhante ao de uma matriz, mas não são matrizes.

Percorrendo o DOM

A partir de qualquer elemento, é possível navegar por: element.parentElement, element.children, element.firstElementChild, element.lastElementChild, element.nextElementSibling, element.previousElementSibling.

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

Verificando se um elemento existe

Verifique sempre se querySelector não retornou null antes de usar o resultado, especialmente no caso de elementos que podem não estar presentes em todas as páginas.

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches() e closest()

element.matches(selector) retorna verdadeiro se o elemento corresponder ao seletor. element.closest(selector) percorre a árvore do DOM para cima e retorna o primeiro ancestral que corresponde ao seletor, ou nulo.

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) retorna verdadeiro se o elemento filho estiver dentro do elemento pai ou for o próprio elemento pai. É útil para verificar se um clique ocorreu fora de um modal ou menu suspenso.

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

Desempenho: minimize as consultas ao DOM

As consultas ao DOM não são gratuitas. Armazene o resultado em uma variável em vez de chamar querySelector repetidamente. Nos laços, agrupe as leituras do DOM e depois as escritas do DOM para evitar refluxos excessivos de layout.

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

Verificação rápida

Qual método retorna uma NodeList estática com todos os elementos correspondentes?

Recapitulação: selecionando elementos do DOM

querySelector retorna a primeira correspondência. querySelectorAll retorna todas as correspondências em uma NodeList estática. Restrinja o escopo das consultas a uma subárvore para obter mais eficiência. Armazene os resultados das consultas. Use closest() para a delegação de eventos. Sempre verifique se o resultado é nulo antes de usar um elemento consultado.

Perguntas Frequentes

A aula “querySelector e querySelectorAll” é grátis?

Sim — o texto completo de “querySelector e querySelectorAll” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “querySelector e querySelectorAll”?

Encontre um ou vários elementos usando strings de seletores CSS e entenda a diferença entre NodeList e HTMLCollection. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “querySelector e querySelectorAll”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

querySelector e querySelectorAll
addEventListener e objeto de evento
Alterando conteúdo: textContent, innerHTML e classList
Criando e anexando elementos

← Voltar para Frontend Academy