8.5 - Aprofundando na navegação pelo DOM

🧭 Aprofundando na navegação pelo DOM

🧭 Aprofundando na navegação pelo DOM

Se o DOM é um mapa da sua página, então navegar por ele é como explorar os cômodos de uma casa. 🏠✨

Vamos aprender a andar por essa casa, descobrir quem são os pais, filhos e vizinhos, e como encontrar qualquer parte da sua página com JavaScript.

---

🧼 Selecionando elementos no DOM

Antes de navegar, precisamos saber como encontrar o ponto de partida. Isso se chama selecionar um elemento.

🔹 1. Por ID

<p id="meuTexto">Olá, mundo!</p>

const el = document.getElementById("meuTexto");

✅ Rápido e eficiente ⚠️ IDs devem ser únicos!

---

🔹 2. Por tag (nome da tag)

<p>Primeiro</p>
<p>Segundo</p>

const paragrafos = document.getElementsByTagName("p");

🔁 Retorna uma coleção de todos os <p> da página!

---

🔹 3. Por class

<p class="mensagem">Oi</p>

const mensagens = document.getElementsByClassName("mensagem");

---

🔹 4. Por name

Útil em formulários:

<input name="email" />

const email = document.getElementsByName("email");

---

🔹 5. Por seletor CSS (mais flexível)

const titulo = document.querySelector("h1");
const botoes = document.querySelectorAll(".btn");

💡 querySelector → retorna o primeiro 💡 querySelectorAll → retorna todos

---

🧭 Navegando pela estrutura do DOM

🔼 Subindo

elemento.parentNode

Retorna o pai do elemento.

🔽 Descendo

elemento.children
elemento.firstElementChild
elemento.lastElementChild

Pega os filhos diretos de um elemento.

🔁 Lateral (irmãos)

elemento.nextElementSibling
elemento.previousElementSibling

---

🧩 Navegando pelos nós (textos, espaços e comentários)

elemento.childNodes
elemento.firstChild
elemento.lastChild

⚠️ Diferente de .children — esses incluem textos e espaços em branco!

---

💡 Exemplo real

<div id="caixa">
  <p class="mensagem">Olá</p>
  <p class="mensagem">Mundo</p>
</div>

const caixa = document.getElementById("caixa");
const primeiroParagrafo = caixa.children[0];
console.log(primeiroParagrafo.textContent); // "Olá"

---

🧨 Comportamento inesperado

const filhos = document.getElementById("caixa").childNodes;
console.log(filhos[0]); // 😳 Pode ser um espaço em branco!

🧠 Solução: use .children se quiser só os elementos HTML.

---

✅ Boas práticas

• Use querySelector sempre que possível: simples e moderno.

• Use .children ao invés de .childNodes se quiser apenas elementos.

• Teste se o elemento existe antes de usá-lo:

const el = document.getElementById("naoExiste");
if (el) {
  el.textContent = "Oi!";
}

---

🚫 Más práticas

• Usar seletores genéricos demais (document.getElementsByTagName("*"))

• Usar innerHTML para navegar (não é para isso!)

• Contar com childNodes sem verificar se é um texto ou espaço

• Usar for direto em HTMLCollection sem transformar em array

---

🤖 Dica: transforme coleções em arrays

const filhos = Array.from(document.body.children);
filhos.forEach(el => console.log(el.tagName));

---

🧠 Resumo

Ação	Método
Selecionar por ID	getElementById("id")
Selecionar por classe	getElementsByClassName("classe")
Selecionar por tag	getElementsByTagName("tag")
Seletor moderno CSS	querySelector("seletor")
Ir para pai	parentNode
Ir para filhos	children, firstElementChild
Ir para irmãos	nextElementSibling, previousElementSibling
Incluir nós de texto	childNodes

---

🧪 Exercício rápido

Tente usar o console do navegador para rodar isso em qualquer site:

console.log(document.body.children[0].tagName);

---

🌐 Curiosidade

Muitos recursos modernos do DOM são baseados no CSS. Ou seja, saber CSS ajuda você a navegar melhor no DOM! 😉