🚀 Capítulo 02: Selecionando Elementos
🎯 Objetivo da Aula
Ao final desta aula, você saberá como usar o JavaScript para encontrar qualquer elemento HTML na página usando os métodos getElementById e querySelector.
🏢 O Cenário Prático (Seu Desafio)
Para enviar comandos para a nave inimiga, primeiro você precisa encontrá-la no radar! Seu desafio é usar os seletores do JavaScript para capturar o elemento do “Painel Inimigo” e trazê-lo para o nosso controle.
🧠 Fundamentos: A Teoria Traduzida
Para mexer em um elemento com JavaScript, o primeiro passo é selecionar ele. Temos duas formas principais de fazer isso:
1. document.getElementById('id-do-elemento')
É a forma mais rápida e antiga. Você passa o ID do elemento e o JavaScript te devolve ele.
- Uso: Quando o elemento tem um ID único.
2. document.querySelector('.classe-do-elemento')
É a forma mais moderna e poderosa. Você usa a mesma sintaxe do CSS para selecionar o elemento!
querySelector('#id')→ Seleciona por ID.querySelector('.classe')→ Seleciona por classe.querySelector('p')→ Seleciona a primeira tag P.
📖 Exemplo Guiado: Mirando no Alvo
Imagine que temos este HTML:
<h1 id="mira">Alvo Localizado</h1>Podemos selecioná-lo de duas formas:
// Forma 1
const alvo1 = document.getElementById('mira');
// Forma 2
const alvo2 = document.querySelector('#mira');🛠️ Prática Obrigatória 1
No seu arquivo HTML, crie um parágrafo com a classe mensagem e o texto “Aguardando ordens…“. No JS, selecione-o usando querySelector.
🛠️ Prática Obrigatória 2
Mostre o elemento selecionado no console usando console.log().
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
const msg = document.querySelector('.mensagem');
console.log(msg);