📄 4. DOM – Document Object Model
Visão Geral: O DOM é uma interface de programação que representa a estrutura da página web como uma árvore de objetos. Ele permite manipular elementos HTML de forma dinâmica via JavaScript.
4.1 Estrutura do DOM
O DOM modela o HTML como uma árvore de nós (nodes) — cada tag vira um objeto que pode ser acessado, alterado ou removido.
document
└── html
├── head
│ ├── title
│ └── meta
└── body
├── h1
├── div
│ ├── p
│ └── span
└── footer
console.log(document.body); // Acessa o body da página
4.2 Selecionando elementos HTML
4.2.1 Métodos getElementById, getElementsByTagName, getElementsByClassName
const titulo = document.getElementById("titulo");
const paragrafos = document.getElementsByTagName("p");
const destaques = document.getElementsByClassName("destaque");
getElementById retorna um único elemento. Os demais retornam coleções (HTMLCollection).
4.2.2 Métodos querySelector e querySelectorAll
const primeiroParagrafo = document.querySelector("p");
const todosOsLinks = document.querySelectorAll("a");
querySelector aceita seletores CSS e retorna o primeiro match. querySelectorAll retorna uma NodeList com todos os elementos encontrados.
🧪 Demonstração: Seleção de Elementos
Título de demonstração
Primeiro parágrafo
Segundo parágrafo com destaque
Span com destaque
Link de exemplo
// Resultados da seleção aparecerão aqui
4.3 Modificando elementos
4.3.1 Modificando conteúdo
document.getElementById("titulo").textContent = "Novo Título";
4.3.2 Modificando atributos
const link = document.querySelector("a");
link.setAttribute("href", "https://exemplo.com");
link.setAttribute("target", "_blank");
4.3.3 Modificando estilo
const caixa = document.querySelector(".caixa");
caixa.style.backgroundColor = "lightblue";
🧪 Demonstração: Modificação de Elementos
Elemento para modificação
// Resultados das modificações aparecerão aqui
4.3.4 Criando e removendo elementos
const novoItem = document.createElement("li");
novoItem.textContent = "Item novo";
document.querySelector("ul").appendChild(novoItem);
const remover = document.querySelector("ul li");
remover.remove();
🧪 Demonstração: Criação e Remoção
- Item 1 - Original
- Item 2 - Original
// Resultados da criação/remoção aparecerão aqui
4.3.5 innerHTML vs. textContent (.extra)
| Método | Descrição | Exemplo |
|---|---|---|
| innerHTML | Lê/insere HTML (interpreta tags) | element.innerHTML = "<b>Negrito</b>" |
| textContent | Lê/insere apenas texto puro (sem HTML) | element.textContent = "<b>Negrito</b>" |
Cuidado!
innerHTML pode ser uma vulnerabilidade de segurança (XSS) se usado com dados externos.
🧪 Demonstração: innerHTML vs textContent
Área para innerHTML
Área para textContent
// Comparação aparecerá aqui
🧠 Resumo
- O DOM modela a estrutura HTML como árvore de objetos.
- Podemos selecionar elementos com vários métodos.
- A modificação pode ser de conteúdo, atributos, estilos ou estrutura.
innerHTMLrenderiza HTML, enquantotextContentnão.- Criação e remoção dinâmica permitem interatividade avançada.
📋 Perguntas de Revisão
1. O que é o DOM e como ele representa a página HTML?
O DOM é uma árvore de objetos que representa a estrutura HTML, permitindo manipulação via JavaScript.
2. Qual a diferença entre getElementById e querySelector?
getElementById busca apenas por ID, querySelector aceita qualquer seletor CSS.
3. Como adicionar um novo elemento a uma lista?
Usando createElement(), definindo conteúdo e usando appendChild().
4. Quando usar textContent ao invés de innerHTML?
Quando queremos inserir apenas texto, evitando interpretação de HTML e riscos de XSS.