# 8.7 - 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!

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

```javascript
paragrafo.textContent = "Texto novo!";
```

#### 💡 Inserir conteúdo com HTML

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

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

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

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

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

```css
.oculto {
  display: none;
}
```

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

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

✔️ Solução:

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

***

#### ❌ Tentar mudar valor de um `div`

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

✔️ Solução:

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

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

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

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

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

```javascript
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()` |