🚀 Capítulo 12: Navegando no DOM

🎯 Objetivo da Aula

Ao final desta aula, você saberá como navegar pela árvore do DOM, encontrando elementos pais, filhos e irmãos a partir de um elemento de referência.

---

🏢 O Cenário Prático (Seu Desafio)

A árvore genealógica dos Skywalker é complexa! No DOM também é assim. Seu desafio hoje é: a partir de um botão clicado, encontrar o “Pai” dele (a div onde ele está) para mudar a cor de fundo dela!

---

🧠 Fundamentos: A Teoria Traduzida

Às vezes você não tem o ID do elemento que quer mexer, mas você tem o ID do elemento que está do lado dele ou acima dele. Podemos navegar assim:

1. Ir para o Pai: elemento.parentNode ou parentElement.
2. Ir para os Filhos: elemento.children (devolve uma lista de todos os filhos).
3. Ir para os Irmãos: nextElementSibling (próximo) ou previousElementSibling (anterior).

---

📖 Exemplo Guiado: Encontrando o Pai

<div class="sala">
  <button class="botao-alarme">Disparar</button>
</div>

const botao = document.querySelector('.botao-alarme');
 
botao.addEventListener('click', (e) => {
  // Acessando o pai do botão (a div classe 'sala')
  const pai = e.target.parentElement;
  pai.style.backgroundColor = 'red';
});

---

🛠️ Prática Obrigatória 1

Crie uma lista <ul> com 3 <li>. Selecione a <ul> e mude a cor do primeiro filho dela usando .children[0].

---

🛠️ Prática Obrigatória 2

Crie um botão e, ao clicar nele, mude o texto do elemento que está logo acima dele no HTML usando previousElementSibling.

---

🔑 Gabarito de Código/Fórmulas

Prática 1:

const lista = document.querySelector('ul');
lista.children[0].style.color = 'blue';

---

← Capitulo Anterior | Proximo Capitulo →