8.7 - Personalizando o DOM na prática

🎛️ Aprofundando: Personalizando o DOM na Prática

🎛️ Aprofundando: Personalizando o DOM na Prática

Agora que você já sabe navegar pelo DOM e encontrar os elementos certos na página, vamos dar o próximo passo: aprender como personalizar esses elementos com JavaScript! 🚀

Isso com exemplos reais, dicas práticas e os cuidados que você deve tomar para não cair em erros comuns.

Vamos deixar sua página com a sua cara? 🎨💡

---

🔍 Acessando elementos da página

Primeiro passo: encontrar o que você quer modificar!

const titulo = document.querySelector("h1");
const paragrafo = document.getElementById("mensagem");

Agora podemos fazer mágica com esses elementos! 🎩✨

---

🧾 Mudando o conteúdo (textos e HTML)

📝 Texto visível

paragrafo.textContent = "Texto novo!";

💡 Inserir conteúdo com HTML

paragrafo.innerHTML = "<strong>Texto em negrito!</strong>";

⚠️ Atenção: innerHTML executa HTML e pode causar problemas de segurança. Evite se estiver lidando com dados do usuário!

---

🧠 Lendo e alterando valores de inputs

<input id="nome" value="Maria" />
<button onclick="mudarNome()">Mudar nome</button>

function mudarNome() {
  const input = document.getElementById("nome");
  console.log(input.value); // lê o valor
  input.value = "João";     // muda o valor
}

---

🎨 Trabalhando com estilos

Você pode mudar o estilo de qualquer elemento como se estivesse usando CSS!

const caixa = document.querySelector("#caixa");
caixa.style.backgroundColor = "lightblue";
caixa.style.border = "2px solid black";
caixa.style.padding = "10px";

💡 Os nomes das propriedades CSS viram camelCase no JavaScript!

CSS	JavaScript
background-color	backgroundColor
font-size	fontSize

---

🔄 Alternando classes (estilos CSS)

<p id="aviso" class="oculto">Atenção!</p>

.oculto {
  display: none;
}

const aviso = document.getElementById("aviso");
aviso.classList.remove("oculto"); // Mostra o aviso!
aviso.classList.add("alerta");
aviso.classList.toggle("destaque"); // Ativa ou desativa

---

💥 Exemplos com comportamento inesperado

❌ Esquecer de esperar a página carregar

document.getElementById("titulo").textContent = "Olá!";
// ERRO: Cannot read properties of null

✔️ Solução:

window.onload = function() {
  document.getElementById("titulo").textContent = "Olá!";
};

---

❌ Tentar mudar valor de um div

const bloco = document.querySelector("#caixa");
bloco.value = "oi"; // Não funciona!

✔️ Solução:

bloco.textContent = "oi";

---

✅ Boas práticas

• Use textContent para textos simples.

• Só use innerHTML se precisar adicionar HTML (e tiver certeza que é seguro).

• Prefira .classList ao invés de .className.

• Use estilos via CSS e apenas altere classes via JS quando possível.

• Comente seu código! Isso ajuda você e outras pessoas.

---

🚫 Más práticas

• Mudar estilos diretamente com .style para tudo → deixa o código confuso

• Usar innerHTML com entrada do usuário → riscos de segurança

• Misturar muita lógica dentro do HTML (como onclick direto na tag)

---

🧠 Observação importante! Diferenças que confundem muita gente 👇

📝 textContent vs innerText

Propriedade	O que faz	Diferença principal
textContent	Mostra todo o texto, incluindo o escondido com CSS	Mais rápido, confiável para JS
innerText	Mostra só o texto visível na tela	Depende do estilo da página (ex: display: none)

element.textContent = "Texto";
element.innerText = "Texto visível";

💡 Use textContent para garantir que você sempre leia/escreva o texto bruto, sem interferência do estilo.

---

🔤 innerHTML vs innerText vs textContent

• innerHTML → inclui e interpreta HTML (ex: <strong>Olá</strong>)

• innerText → só o texto visível

• textContent → todo o texto interno, mesmo se não for visível

element.innerHTML = "<strong>Negrito</strong>"; // interpreta HTML
element.innerText = "<strong>Negrito</strong>"; // mostra o texto como está

⚠️ Evite usar innerHTML com conteúdo vindo do usuário! Pode abrir portas para ataques.

---

🏷️ classList vs className

Propriedade	O que faz	Vantagens
classList	Permite adicionar, remover, alternar classes	✅ Seguro, moderno, mais flexível
className	Substitui todas as classes de uma vez	⚠️ Pode apagar classes existentes sem querer!

element.classList.add("ativo");
element.classList.remove("erro");
element.classList.toggle("visivel");

element.className = "nova-classe"; // substitui tudo!

✅ Prefira classList para manipular estilos com segurança.

---

Essas diferenças são pequenas, mas fazem uma grande diferença quando seu código cresce! 🧩 Sempre que puder, teste no console do navegador para ver o comportamento real.

---

🧪 Experimento: botão que muda cor de fundo

<button onclick="trocarFundo()">Trocar cor</button>

function trocarFundo() {
  document.body.style.backgroundColor = "#"+Math.floor(Math.random()*16777215).toString(16);
}

🎉 Cada clique muda o fundo da página para uma cor aleatória!

---

🧠 Dicas extras para iniciantes

• O DOM muda o conteúdo ao vivo, então é ótimo para interatividade!

• Sempre cheque se o elemento existe antes de mexer nele.

• Explore as ferramentas do navegador — use o console para testar ideias!

---

🔁 Recapitulando

O que fazer	Como fazer
Mudar texto	element.textContent = "..."
Inserir HTML	element.innerHTML = "..."
Ler input	input.value
Mudar input	input.value = "novo"
Mudar estilo	element.style.propriedade = "valor"
Alterar classe	element.classList.add/remove/toggle()