Aula 22 — Selecionando elementos do DOM com querySelector

Agora que você já entende o que é o DOM, chegou a hora de aprender como selecionar elementos da página usando JavaScript.

Essa é uma das habilidades mais importantes para quem trabalha com JavaScript na web.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Selecionar elementos do DOM
• Usar querySelector
• Usar querySelectorAll
• Entender seletores CSS no JavaScript

🧠 O que significa “selecionar” um elemento?

Selecionar um elemento significa encontrar um elemento HTML para poder manipulá-lo com JavaScript.

Antes de alterar texto, estilo ou responder a eventos, o JavaScript precisa saber qual elemento estamos falando.

🔑 O método querySelector

O método querySelector() permite selecionar o primeiro elemento que corresponde a um seletor CSS.

 document.querySelector("seletor"); 

O seletor usado é o mesmo do CSS.

🎯 Selecionando por tag

Podemos selecionar elementos pelo nome da tag:

 let titulo = document.querySelector("h1"); 

Isso seleciona o primeiro <h1> da página.

🏷️ Selecionando por classe

Para selecionar por classe, usamos o ponto ..

 let texto = document.querySelector(".cb-text"); 

Esse código seleciona o primeiro elemento com a classe cb-text.

🆔 Selecionando por id

Para selecionar por id, usamos o símbolo #.

 let botao = document.querySelector("#meuBotao"); 

O id deve ser único na página.

📦 Selecionando vários elementos

O método querySelectorAll() seleciona todos os elementos que correspondem ao seletor.

 let itens = document.querySelectorAll("li"); 

O retorno é uma NodeList, semelhante a um array.

🔁 Percorrendo elementos selecionados

Podemos percorrer os elementos usando forEach:

 
  itens.forEach(function(item) 
  { 
    console.log(item.textContent); 
  }); 

⚠️ E se o elemento não existir?

Se nenhum elemento for encontrado, querySelector retorna null.

 
  let elemento = document.querySelector(".inexistente"); 
  console.log(elemento);