# 8.6 - 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

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

#### 👉 JavaScript

```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

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

#### 👉 JavaScript

```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:

```javascript
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á!

```javascript
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:

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

Adicione este JavaScript:

```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**! 💥