0Pricing
JavaScript Academy · Aula

Selecionando elementos com querySelector

Encontre elementos usando seletores CSS.

Selecionando elementos com querySelector é uma aula grátis de JavaScript 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Conheça querySelector

querySelector retorna o primeiro elemento que corresponde a um seletor CSS ou null se nada corresponder. Ele está disponível em document e em todos os elementos.

const title = document.querySelector("h1");
console.log(title.textContent);

Qualquer seletor CSS funciona

O poder de querySelector é aceitar os mesmos seletores usados em CSS: marcadores, classes, identificadores, atributos e combinações.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

querySelectorAll retorna todos os elementos correspondentes como uma NodeList estática. Mesmo sem nenhuma correspondência, ele retorna uma lista vazia, nunca nulo.

const cards = document.querySelectorAll(".card");
console.log(cards.length);

Percorrendo os resultados

Uma NodeList de querySelectorAll aceita forEach diretamente, o que torna a iteração simples.

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

Seletores de descendentes

Você pode selecionar elementos aninhados usando um espaço (descendente), assim como em CSS. Isso encontra todos os .price dentro de um .product.

const prices = document.querySelectorAll(".product .price");

Combinando classes

Encadear classes sem espaço significa que um elemento precisa ter todas elas. Aqui, correspondemos a botões que são primários e grandes.

const btn = document.querySelector("button.primary.large");

Consultas com escopo

Chamar querySelector em um elemento, e não em document, pesquisa somente dentro desse elemento. Isso mantém as pesquisas locais e rápidas.

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

Pseudoclasses

Pseudoclasses estruturais, como :first-child e :nth-of-type, também funcionam.

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

Lidando com nenhuma correspondência

Como querySelector pode retornar null, verifique o resultado antes de usá-lo para evitar um TypeError.

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

Seletores de atributos

Os seletores de atributos permitem fazer correspondências com atributos de dados, o que é ótimo para acessar elementos sem depender de classes.

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector versus APIs mais antigas

querySelector é mais flexível que getElementById porque aceita qualquer seletor, mas as buscas por identificador ainda são um pouco mais rápidas. Use a ferramenta certa para cada tarefa.

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

Verificação rápida

Teste seu entendimento sobre seletores.

Recapitulação

Você aprendeu que querySelector retorna a primeira correspondência, ou nulo, e que querySelectorAll retorna uma NodeList estática com todas as correspondências. Ambos aceitam seletores CSS completos e podem ter o escopo limitado a um elemento pai. Sempre verifique se o resultado é nulo ao usar querySelector.

Perguntas Frequentes

A aula “Selecionando elementos com querySelector” é grátis?

Sim — o texto completo de “Selecionando elementos com querySelector” é 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 JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Selecionando elementos com querySelector”?

Encontre elementos usando seletores CSS. Você pratica JavaScript 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 JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript 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 “Selecionando elementos com querySelector”?

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 JavaScript Academy?

Sim. Cada aula de JavaScript 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

  1. Selecionando elementos com querySelector
  2. getElementById e getElementsByClassName
  3. Percorrendo pais, filhos e irmãos
  4. NodeList versus HTMLCollection
← Voltar para JavaScript Academy