Selecionando elementos: como o JavaScript 'acha' as coisas na página (getElementById, querySelector)

Aprenda a selecionar elementos HTML específicos para poder interagir com eles.

Agora que você já entendeu o DOM como o “mapa da página”, vem a pergunta prática:

Como o JavaScript encontra exatamente o elemento que queremos mudar?

A resposta está nos seletores de elementos.

Pense na página como uma casa com vários cômodos e objetos.
Selecionar elemento é como dizer:

  • “pegue o item com etiqueta X”
  • ou “pegue o primeiro item que combine com essa regra”

Por que selecionar elementos?

Porque quase toda ação no DOM começa com isso:

  • mudar texto
  • alterar estilo
  • trocar imagem
  • reagir a clique
  • adicionar ou remover classes

Sem selecionar, o JavaScript não sabe onde agir.

1) getElementById: buscando pela etiqueta única (id)

Se um elemento tem id, você pode encontrá-lo assim:

<h1 id="titulo">Bem-vindo</h1>

const titulo = document.getElementById("titulo");
console.log(titulo);

Ideia principal

id deve ser único na página.
Então esse método é como procurar uma pessoa pelo CPF: direto e específico.

Exemplo prático

const titulo = document.getElementById("titulo");
titulo.textContent = "Olá, JavaScript!";

2) querySelector: buscando com “regra CSS”

querySelector usa seletores CSS para encontrar o primeiro elemento que combina com a regra.

Exemplo por id

const titulo = document.querySelector("#titulo");

Exemplo por classe

const card = document.querySelector(".card");

Exemplo por tag

const primeiroParagrafo = document.querySelector("p");

Exemplo com seletor mais específico

const linkMenu = document.querySelector("nav a");

Diferença rápida entre os dois

  • getElementById("titulo")
    • busca só por id
    • direto e muito comum
  • querySelector("seletor")
    • aceita regras CSS (id, classe, tag, combinações)
    • retorna o primeiro que encontrar

Qual usar?

Regra simples para iniciantes:

  • Se você já tem um id único: use getElementById.
  • Se precisa de flexibilidade (classe, estrutura, combinação): use querySelector.

Na prática, os dois são muito usados.

E se não encontrar o elemento?

Quando não encontra, o resultado é null.

const botao = document.getElementById("naoExiste");
console.log(botao); // null

Por isso, vale validar antes de usar:

const botao = document.getElementById("btnSalvar");

if (botao) {
  botao.textContent = "Salvar agora";
}

Erros comuns de quem está começando

  1. Esquecer # no querySelector ao buscar id

    • errado: querySelector("titulo")
    • certo: querySelector("#titulo")

  2. Esquecer . ao buscar classe

    • errado: querySelector("card")
    • certo: querySelector(".card")

  3. Tentar selecionar antes do elemento existir no DOM

    • solução comum: colocar o script no final do body ou usar evento de carregamento.

Exemplo completo curto

<h1 id="titulo">Curso JS</h1>
<p class="descricao">Aprendendo DOM</p>

const titulo = document.getElementById("titulo");
const descricao = document.querySelector(".descricao");

titulo.textContent = "Curso JS Essencial";
descricao.textContent = "Agora você já sabe selecionar elementos!";

Resumo da lição

  • Selecionar elementos é o primeiro passo para manipular o DOM.
  • getElementById busca por id único.
  • querySelector usa seletor CSS e retorna o primeiro elemento compatível.
  • Se não encontrar, retorna null.
  • Saber selecionar bem é base para todas as próximas lições de DOM.