> For the complete documentation index, see [llms.txt](https://favelaware.gitbook.io/favelaware/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://favelaware.gitbook.io/favelaware/8-javascript-para-web/8.6-alterando-conteudos-da-pagina.md).

# 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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://favelaware.gitbook.io/favelaware/8-javascript-para-web/8.6-alterando-conteudos-da-pagina.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.