Programação Web 2

API DOM — Document Object Model

Prof. Me. Danilo Bueno

O que é uma API?

API = Application Programming Interface

É um contrato que define como dois sistemas se comunicam — quais comandos existem e o que cada um faz.

• Você não precisa saber como funciona por dentro
• Só precisa saber o que chamar e o que esperar de volta
• Exemplo do cotidiano: o controle remoto é uma API da TV

No navegador, APIs são conjuntos de métodos e propriedades que o JavaScript pode usar para interagir com o ambiente.

Web APIs

O navegador expõe dezenas de APIs para o JavaScript:

• DOM — manipular o HTML e CSS da página
• Fetch API / XMLHttpRequest — buscar dados em servidores
• Canvas / WebGL — desenhar gráficos e animações 2D/3D
• Web Audio API / HTMLMediaElement — áudio e vídeo
• Web Storage / IndexedDB — armazenamento local no navegador
• Geolocation API — localização do dispositivo

O que é o DOM?

O navegador, ao carregar um HTML, cria um modelo em memória de todos os elementos da página. Esse é o DOM.

• Document Object Model
• É a ponte entre o JavaScript e o que o usuário vê na tela
• O ponto de entrada é sempre o objeto global document

console.log(document.title);   // "Meu Site"
console.log(document.body);    // <body>...</body>
console.log(typeof document);  // "object"

A Árvore DOM

document
└── html
    ├── head → title ("Meu Site")
    └── body
        ├── h1 ("Bem-vindo")
        └── ul#produtos
            ├── li ("Notebook")
            └── li ("Monitor")

• parentElement — o nó pai
• children — os filhos diretos
• siblings — nós no mesmo nível são irmãos

Manipulação do DOM

Uma vez que temos acesso à árvore, podemos:

1. Selecionar elementos para lê-los ou modificá-los
2. Ler e alterar o conteúdo (texto, HTML interno)
3. Modificar classes e atributos CSS
4. Criar novos elementos e inseri-los na página
5. Remover elementos existentes
6. Ouvir eventos — cliques, digitação, envio de formulário

Vamos ver cada um desses grupos a seguir.

1. Selecionando Elementos

Existem desde os primórdios do DOM (1998–2005).

// por id — retorna 1 elemento ou null
document.getElementById("menu")

// por tag — retorna HTMLCollection de todos
document.getElementsByTagName("li")

// por classe — retorna HTMLCollection de todos
document.getElementsByClassName("destaque")

Ainda funcionam, mas têm uso limitado.
Em código moderno, preferimos os métodos novos.

1. Selecionando Elementos

Introduzidos em 2008. Aceitam qualquer seletor CSS:

// retorna o PRIMEIRO elemento que combina, ou null
document.querySelector("h1")
document.querySelector("#menu")
document.querySelector(".destaque")

// retorna TODOS em uma NodeList
document.querySelectorAll(".destaque")

• querySelectorAll retorna NodeList
• use for...of para percorrer ou Array.from(...) para transformar em array.

2. Lendo e Modificando

Dois métodos para ler e escrever o que está dentro de um elemento:

• textContent — lê ou define o texto puro, sem interpretar HTML. Ideal para exibir dados vindos do usuário.
• innerHTML — lê ou define o HTML interno. Interpreta as tags — útil para conteúdo fixo/confiável.

2. Lendo e Modificando

Exemplo

const paragrafo = document.querySelector("p");

console.log(paragrafo.textContent); // texto sem tags
console.log(paragrafo.innerHTML);   // HTML interno completo

paragrafo.textContent = "Novo texto simples";
paragrafo.innerHTML   = "Texto com <strong>negrito</strong>";

3. Modificando Classes

classList — API para gerenciar as classes CSS de um elemento sem precisar manipular a string className manualmente:

3. Modificando Classes

Exemplo:

const card = document.querySelector(".card");

card.classList.add("ativo");
card.classList.toggle("expandido"); // liga/desliga ao clicar

3. Atributos

setAttribute / getAttribute — lê e define qualquer atributo HTML:

const img = document.querySelector("img");

img.setAttribute("alt", "Foto do produto");
img.setAttribute("src", "novo-produto.jpg");

console.log(img.getAttribute("src")); // "novo-produto.jpg"

3. Atributos

Atributos comuns também existem como propriedades diretas:

const input = document.querySelector("input");

console.log(input.type);     // "text"
console.log(input.disabled); // true ou false
input.disabled = true;       // desabilita o campo

4. Criando/Inserindo Elementos

Para adicionar conteúdo dinamicamente, criamos o elemento em JS e depois o inserimos na árvore DOM:

document.createElement(tag) — cria um novo elemento (ainda não está na página)

pai.appendChild(filho) — insere como último filho

// Cria um novo item de lista
const item = document.createElement("li");
item.textContent = "Novo produto";
// Insere no <ul>
const lista = document.querySelector("ul");
lista.appendChild(item);

4. Criando/Inserindo Elementos

Você pode montar toda a estrutura antes de inserir na página

const card = document.createElement("div");
card.classList.add("card");

const titulo = document.createElement("h2");
titulo.textContent = "Notebook Pro";

const preco = document.createElement("p");
preco.textContent = "R$ 3.499,00";

card.appendChild(titulo);  // titulo entra no card
card.appendChild(preco);   // preco entra no card

document.querySelector("#catalogo").appendChild(card); // card entra na página

5. Removendo Elementos

elemento.remove() — forma moderna, remove o próprio elemento:

const aviso = document.querySelector(".aviso");
aviso.remove(); // desaparece da página

pai.removeChild(filho) — forma clássica, requer acesso ao pai:

const lista = document.querySelector("ul");
const primeiro = lista.querySelector("li");
lista.removeChild(primeiro);

Para remover a partir de um botão interno, parentElement é o atalho:

botaoFechar.addEventListener("click", () => {
  botaoFechar.parentElement.remove(); // remove o contêiner pai
});

6. Ouvindo Eventos

Eventos são ações do usuário (clique, digitação, envio) ou do navegador (página carregada).

• addEventListener(tipo, callback) — registra uma função para ser chamada quando o evento ocorrer:

const botao = document.querySelector("#salvar");

botao.addEventListener("click", () => {
  console.log("Salvando...");
});

6. Ouvindo Eventos

• O callback pode ser uma função anônima (como acima) ou uma função nomeada:

function salvar() {
  console.log("Salvando...");
}   

botao.addEventListener("click", salvar);

6. Tipos de Eventos

6. O Objeto Event

Todo callback recebe automaticamente um objeto event com informações sobre o que aconteceu:

• event.type — tipo do evento ("click", "submit", ...)
• event.target — o elemento exato que disparou o evento
• event.preventDefault() — cancela o comportamento padrão do navegador

document.querySelector("button").addEventListener("click", (event) => {
  console.log(event.type);          // "click"
  console.log(event.target.id);     // id do botão clicado
});

6. event.preventDefault()

Por padrão, submeter um <form> recarrega a página inteira.
preventDefault() cancela esse comportamento:

const form = document.querySelector("form");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // página não recarrega

  const nome = document.querySelector("#nome").value.trim();
  console.log("Recebido:", nome);
});

Exemplo DOM - Formulários

input.value — retorna o texto digitado (sempre como string)

.trim() — remove espaços em branco no início e no fim

const input = document.querySelector("#busca");

console.log(input.value);       // "  notebook  "
console.log(input.value.trim()); // "notebook"

Após processar, limpe o campo e devolva o foco:

input.value = "";  // limpa
input.focus();     // cursor volta para o campo

Obrigado!

[email protected] · website/docs · github