8.4 - Navegando pelo DOM

🔍 Navegando pelo DOM

Agora que você já sabe o que é o DOM e por que ele é importante, vamos aprender como navegar por ele usando JavaScript.

Lembra que o DOM é como uma árvore com caixinhas dentro de caixinhas? 📦🌳 Pois é, agora você vai aprender a encontrar essas caixinhas!

🗺️ O navegador como guia

Quando você escreve um código HTML, o navegador transforma isso em DOM. O objeto principal que representa a página é o document.

O document é o ponto de partida para acessar tudo no DOM!

🆔 Acessando elementos com `getElementById`

Uma das formas mais simples de encontrar um elemento na página é pelo id.

👇 Exemplo HTML:

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

👉 Código JavaScript:

const titulo = document.getElementById("titulo");
console.log(titulo); // Mostra o elemento <h1> no console

🧠 Explicando:

document → o DOM da página
getElementById("titulo") → procura o elemento com id="titulo"
const titulo → guarda esse elemento numa variável

🧪 Testando no navegador

Você pode abrir o navegador, ir até uma página com HTML e:

Clicar com o botão direito → Inspecionar
Ir até a aba Console
Escrever:

document.getElementById("titulo");

Se o elemento existir, ele aparece ali! 🎉

🗃️ Lembrando da estrutura em árvore

Vamos imaginar o HTML abaixo:

<body>
  <h1 id="cabecalho">Título</h1>
  <p>Parágrafo 1</p>
  <p>Parágrafo 2</p>
</body>

Esse código vira uma árvore DOM assim:

📦 body
 ├── 📦 h1 (id="cabecalho")
 ├── 📦 p (Parágrafo 1)
 └── 📦 p (Parágrafo 2)

O navegador sabe onde está cada caixinha, e você pode pedir:

const cabecalho = document.getElementById("cabecalho");

⚠️ Importante

O id precisa ser único na página!
Se não existir um elemento com o id que você escreveu, o resultado será null (ou seja, nada).

✅ Resumo até aqui

Comando

O que faz

document

Representa toda a página

getElementById("nome")

Acessa o elemento com o id especificado

console.log()

Mostra o resultado no console do navegador

🧠 Desafio rápido!

Crie um arquivo HTML com o seguinte conteúdo:

<h2 id="mensagem">Mensagem original</h2>

Em uma tag <script>, adicione:

const mensagem = document.getElementById("mensagem");
mensagem.textContent = "Mensagem atualizada com JavaScript! 🚀";

Abra o arquivo no navegador e veja a mágica acontecer! ✨

Na próxima seção, vamos aprender a alterar conteúdos da página, como textos e estilos, usando o poder do DOM e do JavaScript! 😄

Anterior8.3 - Entendendo melhor o DOM Próximo8.5 - Aprofundando na navegação pelo DOM

Atualizado há 6 meses