O que você vai aprender?
Nesta aula você vai entender como o JavaScript consegue enxergar e modificar uma página HTML depois que ela foi carregada pelo navegador.
O responsável por criar essa ponte entre o HTML e o JavaScript é o DOM — Document Object Model.
Acompanhe sua evolução
Conclua cada etapa para liberar a próxima.
O que é o DOM?
Entendendo como o navegador representa uma página HTML.
DOM significa Document Object Model, ou Modelo de Objetos do Documento.
Quando o navegador recebe um arquivo HTML, ele interpreta as tags e cria uma estrutura hierárquica de objetos.
O JavaScript utiliza essa estrutura para localizar elementos, alterar conteúdos, modificar estilos, adicionar classes, responder a eventos e até criar novos elementos.
Imagine uma árvore
Uma maneira simples de compreender o DOM é imaginar uma árvore genealógica.
O elemento
<html>
está no topo. Dentro dele existem
<head>,
<body>
e outros elementos.
document
│
└── html
│
├── head
│
└── body
│
├── h1
│
├── p
│
└── buttonEncontrando elementos no DOM
Como o JavaScript localiza elementos HTML.
Antes de modificar um elemento HTML precisamos conseguir encontrá-lo.
O JavaScript oferece diversos métodos para fazer isso. Nesta etapa vamos conhecer alguns dos mais importantes.
2.1 getElementById()
Suponha que exista este elemento:
<h1 id="titulo">
Olá, aluno!
</h1>Podemos encontrar esse elemento utilizando:
const titulo =
document.getElementById("titulo");2.2 querySelector()
O querySelector() permite utilizar seletores CSS.
const titulo =
document.querySelector("#titulo");Também podemos procurar por classes:
const caixa =
document.querySelector(".caixa");2.3 querySelectorAll()
Quando precisamos selecionar vários elementos podemos utilizar:
const itens =
document.querySelectorAll(".item");Item 1
Item 2
Item 3
textContent e innerHTML
Modificando o conteúdo dos elementos.
Depois de encontrar um elemento, podemos alterar aquilo que ele apresenta para o usuário.
Duas propriedades muito importantes são textContent e innerHTML.
textContent
Trabalha com texto.
elemento.textContent =
"Novo texto";innerHTML
Permite inserir HTML.
elemento.innerHTML =
"<strong>Olá!</strong>";Exemplo prático
<p id="mensagem">
Texto original
</p>const mensagem =
document.getElementById("mensagem");
mensagem.textContent =
"Texto alterado pelo JavaScript";Este texto será alterado.
innerHTML
deve ser utilizado com cuidado quando o conteúdo vier de usuários ou
de fontes externas.
classList e manipulação visual
Alterando classes CSS através do JavaScript.
O JavaScript também pode modificar a aparência dos elementos através da manipulação de classes CSS.
Para isso, uma das ferramentas mais importantes é:
elemento.classList| Método | Função |
|---|---|
| classList.add() | Adiciona uma classe. |
| classList.remove() | Remove uma classe. |
| classList.toggle() | Adiciona ou remove uma classe. |
| classList.contains() | Verifica se a classe existe. |
Exemplo
const caixa =
document.querySelector(".caixa");
caixa.classList.add("ativo");
caixa.classList.remove("ativo");
caixa.classList.toggle("ativo");Eventos e addEventListener()
Fazendo a página reagir às ações do usuário.
Uma página web deixa de ser apenas estática quando consegue responder às ações do usuário.
Clique, teclado, movimento do mouse, envio de formulário e várias outras ações podem gerar eventos.
Forma recomendada
const botao =
document.querySelector("#botao");
botao.addEventListener(
"click",
function() {
console.log("Botão clicado!");
}
);Podemos também utilizar uma arrow function:
botao.addEventListener(
"click",
() => {
console.log("Clique!");
}
);Event object
O navegador fornece informações sobre o evento através do objeto event.
botao.addEventListener(
"click",
(event) => {
console.log(event);
}
);Criar, inserir e remover elementos
Construindo partes da página dinamicamente.
O DOM não serve apenas para alterar elementos que já existem.
O JavaScript também consegue criar novos elementos HTML, inserir esses elementos na página e removê-los.
document.createElement()
const novoParagrafo =
document.createElement("p");
novoParagrafo.textContent =
"Novo elemento criado!";appendChild()
Depois de criar o elemento precisamos inseri-lo em algum elemento existente.
const lista =
document.querySelector("#lista");
const item =
document.createElement("li");
item.textContent =
"Novo item";
lista.appendChild(item);remove()
Um elemento também pode ser removido do documento:
const elemento =
document.querySelector("#elemento");
elemento.remove();DOM em um pequeno sistema
Juntando seleção, conteúdo, eventos e criação de elementos.
Agora vamos pensar como um desenvolvedor.
Imagine um sistema de tarefas onde o usuário digita uma tarefa e clica em Adicionar.
O JavaScript precisa:
- Encontrar o campo.
- Capturar o texto.
- Criar um novo elemento.
- Colocar o texto dentro dele.
- Inserir o elemento na lista.
- Limpar o campo.
<input
id="tarefa"
type="text"
placeholder="Digite uma tarefa"
>
<button id="adicionar">
Adicionar
</button>
<ul id="lista"></ul>const campo =
document.querySelector("#tarefa");
const botao =
document.querySelector("#adicionar");
const lista =
document.querySelector("#lista");
botao.addEventListener(
"click",
() => {
if (campo.value.trim() === "") {
return;
}
const item =
document.createElement("li");
item.textContent =
campo.value;
lista.appendChild(item);
campo.value = "";
}
);Revisão geral do DOM
Consolidando os principais conceitos da aula.
O DOM é uma das partes mais importantes do JavaScript quando trabalhamos com páginas web.
Ele permite transformar uma página estática em uma interface dinâmica e interativa.
Os principais comandos
// Selecionar
document.getElementById("id");
document.querySelector(".classe");
document.querySelectorAll(".item");
// Alterar texto
elemento.textContent = "Novo texto";
// Inserir HTML
elemento.innerHTML = "<strong>Texto</strong>";
// Classes
elemento.classList.add("ativo");
elemento.classList.remove("ativo");
elemento.classList.toggle("ativo");
// Eventos
elemento.addEventListener(
"click",
() => {}
);
// Criar
const novo =
document.createElement("div");
// Inserir
pai.appendChild(novo);
// Remover
elemento.remove();Você chegou ao final da parte teórica!
Agora é hora de testar seus conhecimentos, concluir o desafio e aplicar DOM em um projeto.
Exercícios de fixação
Verifique se você realmente compreendeu o DOM.
O que significa DOM?
Qual método seleciona um elemento pelo ID?
Qual propriedade altera apenas o conteúdo textual de um elemento?
Qual método adiciona uma classe?
Qual método é utilizado para registrar um evento?
Construa uma Lista de Alunos
Crie uma pequena aplicação utilizando DOM. O usuário deverá informar o nome de um aluno e clicar em um botão para adicioná-lo à lista.
- querySelector()
- value
- createElement()
- textContent
- appendChild()
- addEventListener()
- Manipular o DOM.
- Trabalhar com eventos.
- Criar elementos.
- Atualizar a interface.
- Pensar na lógica da aplicação.
Sistema Interativo com DOM
Desenvolva uma pequena interface utilizando HTML, CSS e JavaScript. O objetivo é demonstrar que você compreendeu como o DOM permite controlar uma página através de código.
Aula concluída!
Você estudou como o JavaScript pode acessar e manipular elementos HTML através do DOM.
Continue praticando. A melhor maneira de aprender DOM é criar pequenas interfaces e observar o que acontece quando cada comando é executado.