Aula 24 — Alterando conteúdo e estilos com JavaScript

Agora que você já sabe selecionar elementos e reagir a eventos, chegou o momento de fazer algo poderoso: alterar o conteúdo e o visual da página usando JavaScript.

Essa é a base de toda interatividade moderna na web.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Alterar textos de elementos
• Modificar conteúdo HTML
• Mudar estilos com JavaScript
• Combinar eventos com manipulação do DOM

📝 Alterando texto com textContent

A forma mais simples de alterar o texto de um elemento é usando textContent.

 <p id="mensagem">Texto original</p> 

 
  let msg = document.querySelector("#mensagem"); 
  msg.textContent = "Texto alterado pelo JavaScript!"; 

O conteúdo do parágrafo é atualizado imediatamente.

⚠️ Diferença entre textContent e innerHTML

Também podemos usar innerHTML, mas é preciso cuidado.

 msg.innerHTML = "Texto com HTML"; 

🎨 Alterando estilos com style

O JavaScript pode alterar estilos CSS diretamente:

 
  msg.style.color = "blue"; 
  msg.style.fontSize = "20px"; 
  msg.style.backgroundColor = "#f0f0f0"; 

Propriedades CSS com hífen usam camelCase no JavaScript.

🎯 Usando classes CSS (forma recomendada)

A melhor prática é adicionar ou remover classes CSS, em vez de alterar estilos diretamente.

 .destaque { color: white; background-color: #428bca; padding: 10px; } 

 msg.classList.add("destaque"); 

🔁 Removendo e alternando classes

 
  msg.classList.remove("destaque"); 
  msg.classList.toggle("destaque"); 

O método toggle adiciona ou remove a classe automaticamente.

🖱️ Exemplo completo com evento

Vamos unir tudo o que aprendemos:

 <button id="btn">Alterar</button> <p id="texto">Olá!</p> 

 
  let botao = document.querySelector("#btn"); 
  let texto = document.querySelector("#texto"); 
  botao.addEventListener("click", function() 
  { 
    texto.textContent = "Texto alterado!"; 
    texto.classList.toggle("destaque"); 
  }); 

🧠 Boas práticas finais

• Prefira textContent para texto
• Use classList para estilos
• Evite misturar lógica e visual
• Escreva código claro e organizado

🎓 FIM DO MÓDULO BÁSICO — PARABÉNS!

Você concluiu o Módulo Básico de JavaScript 🎉 Agora você já entende como o JavaScript:

• funciona
• interage com a página
• responde ao usuário

No próximo módulo, vamos entrar em conceitos mais avançados e construir funcionalidades ainda mais poderosas 🚀