8.6 - Alterando conteúdos da página

✍️ Alterando conteúdos da página

✍️ Alterando conteúdos da página

Agora que você já sabe como encontrar elementos no DOM, vamos aprender a mudar o que aparece na tela com JavaScript!

É como se você tivesse um controle remoto 🕹️ para editar sua página enquanto ela está aberta no navegador!

---

🔤 Mudando o texto de um elemento

Vamos começar com o básico: trocar o texto que aparece em um elemento.

👇 HTML

<h1 id="titulo">Olá, visitante!</h1>

👉 JavaScript

const titulo = document.getElementById("titulo");
titulo.textContent = "Seja bem-vindo(a) à minha página! 😄";

🧠 Explicando:

• textContent → permite mudar o texto interno de um elemento

• O texto antigo some e é substituído pelo novo!

---

🎨 Mudando o estilo com .style

Podemos também mudar as cores, fontes e tamanhos usando JavaScript!

👇 HTML

<p id="mensagem">Mensagem importante</p>

👉 JavaScript

const mensagem = document.getElementById("mensagem");
mensagem.style.color = "blue";
mensagem.style.fontSize = "24px";

🔎 O que estamos fazendo:

• style.color → muda a cor do texto

• style.fontSize → muda o tamanho da fonte

💡 Dica: as propriedades de estilo seguem o padrão do CSS, mas escritas em camelCase. Exemplo: background-color no CSS vira backgroundColor no JavaScript.

---

🧱 Criando novos elementos com createElement

Você também pode criar coisas novas com código, como adicionar uma nova frase na página.

Exemplo:

const novoParagrafo = document.createElement("p");
novoParagrafo.textContent = "Este parágrafo foi criado com JavaScript! ✨";

document.body.appendChild(novoParagrafo);

📌 O que fizemos:

1. Criamos um novo elemento <p>

2. Colocamos um texto dentro dele

3. Adicionamos ele no final da página (document.body)

---

💣 Removendo elementos com remove()

Se quiser tirar algo da tela, também dá!

const titulo = document.getElementById("titulo");
titulo.remove(); // Remove o elemento do DOM

⚠️ Use com cuidado! Isso remove o elemento totalmente da página.

---

🔁 Resumo rápido

Ação	Comando
Mudar texto	elemento.textContent = "novo texto"
Mudar estilo	elemento.style.propriedade = "valor"
Criar novo elemento	document.createElement("tag")
Adicionar elemento na página	elementoPai.appendChild(novoElemento)
Remover elemento	elemento.remove()

---

🎯 Desafio prático!

Crie uma página com este HTML:

<h1 id="titulo">Texto inicial</h1>
<button id="botao">Clique para mudar</button>

Adicione este JavaScript:

const titulo = document.getElementById("titulo");
const botao = document.getElementById("botao");

botao.addEventListener("click", function() {
  titulo.textContent = "Você clicou no botão! 🎉";
  titulo.style.color = "green";
});

🔍 O que isso faz:

• Espera um clique no botão

• Quando clica, muda o texto e a cor do título

---

✅ Conclusão

Com esses comandos simples, você já consegue mudar totalmente o conteúdo da sua página em tempo real! 🧙‍♂️✨

Na próxima seção, vamos aprender a responder a eventos, como cliques e teclas — tornando sua página interativa de verdade! 💥