Javascript

O que é o DOM e como o JavaScript interage com o HTML Já leu

• • 10 min de leitura

O que é o DOM e como o JavaScript interage com o HTML
Até agora todo o nosso código rodou no console — um ambiente controlado, sem interface visual. A partir deste módulo mudamos completa

Até agora todo o nosso código rodou no console — um ambiente controlado, sem interface visual. A partir deste módulo mudamos completamente de cenário. Vamos aprender a manipular páginas web de verdade, reagir a cliques, criar e remover elementos, validar formulários e dar vida a interfaces.

Para isso, precisamos primeiro entender o DOM — o conceito central de todo desenvolvimento front-end com JavaScript.

O que é o DOM?

DOM significa Document Object Model — Modelo de Objeto do Documento. Quando o navegador carrega um arquivo HTML, ele não enxerga texto. Ele parseia (interpreta) esse texto e constrói uma representação em memória da página — uma árvore de objetos que o JavaScript pode ler e modificar.

Considere este HTML simples:

<!DOCTYPE html>
<html>
  <head>
    <title>Minha Página</title>
  </head>
  <body>
    <h1 id="titulo">Olá, mundo!</h1>
    <p class="descricao">Bem-vindo ao curso.</p>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </body>
</html>

O navegador transforma isso em uma árvore de nós:

document
└── html
    ├── head
    │   └── title → "Minha Página"
    └── body
        ├── h1#titulo → "Olá, mundo!"
        ├── p.descricao → "Bem-vindo ao curso."
        └── ul
            ├── li → "Item 1"
            ├── li → "Item 2"
            └── li → "Item 3"

Cada elemento HTML vira um nó nessa árvore. E o JavaScript pode acessar, modificar, criar e remover qualquer nó dessa árvore em tempo real — sem recarregar a página.

O objeto document

O ponto de entrada para o DOM é o objeto global document. Ele representa a página inteira e é o ponto de partida para qualquer manipulação:

console.log(document);               // o documento inteiro
console.log(document.title);         // "Minha Página"
console.log(document.URL);           // URL da página atual
console.log(document.body);          // o elemento <body>
console.log(document.head);          // o elemento <head>
console.log(document.documentElement); // o elemento <html>

Selecionando elementos

Para manipular um elemento, primeiro você precisa selecioná-lo. Existem vários métodos:

getElementById

Seleciona um único elemento pelo seu id:

const titulo = document.getElementById("titulo");
console.log(titulo);         // <h1 id="titulo">Olá, mundo!</h1>
console.log(titulo.textContent); // "Olá, mundo!"

getElementsByClassName

Seleciona todos os elementos com uma determinada classe — retorna uma HTMLCollection (parecida com array, mas não é):

const descricoes = document.getElementsByClassName("descricao");
console.log(descricoes[0].textContent); // "Bem-vindo ao curso."

getElementsByTagName

Seleciona todos os elementos de uma tag:

const itens = document.getElementsByTagName("li");
console.log(itens.length); // 3

querySelector e querySelectorAll — os modernos

Estes dois métodos usam seletores CSS e são os mais usados hoje em dia:

// querySelector — retorna o PRIMEIRO elemento que corresponde
const titulo = document.querySelector("#titulo");
const descricao = document.querySelector(".descricao");
const primeiroItem = document.querySelector("li");
const inputEmail = document.querySelector("input[type='email']");

// querySelectorAll — retorna TODOS os elementos correspondentes (NodeList)
const todosItens = document.querySelectorAll("li");
const botoesAtivos = document.querySelectorAll(".btn.ativo");

console.log(todosItens.length); // 3

// NodeList pode ser percorrida com forEach
todosItens.forEach(item => {
  console.log(item.textContent);
});
// Item 1
// Item 2
// Item 3

Na prática moderna, use quase exclusivamente querySelector e querySelectorAll. Eles são flexíveis, consistentes e usam a mesma sintaxe do CSS que você já conhece.

Lendo e modificando conteúdo

Com o elemento selecionado, você pode ler e modificar seu conteúdo:

const titulo = document.querySelector("#titulo");

// Lendo conteúdo
console.log(titulo.textContent); // "Olá, mundo!" — texto puro
console.log(titulo.innerHTML);   // "Olá, mundo!" — HTML interno

// Modificando conteúdo
titulo.textContent = "Bem-vindo ao JavaScript!";

// innerHTML interpreta tags HTML
titulo.innerHTML = "Bem-vindo ao <strong>JavaScript</strong>!";

Atenção: use textContent quando estiver inserindo texto simples. Use innerHTML apenas quando precisar inserir HTML — e nunca com dados vindos do usuário, pois isso abre vulnerabilidades de segurança (XSS).

Lendo e modificando atributos

const link = document.querySelector("a");

// Lendo atributos
console.log(link.getAttribute("href"));  // "https://..."
console.log(link.id);
console.log(link.className);

// Modificando atributos
link.setAttribute("href", "https://developer.mozilla.org");
link.setAttribute("target", "_blank");

// Verificando se existe
console.log(link.hasAttribute("href")); // true

// Removendo
link.removeAttribute("target");

Manipulando estilos CSS

const titulo = document.querySelector("#titulo");

// Modificando estilos inline
titulo.style.color = "royalblue";
titulo.style.fontSize = "2.5rem";
titulo.style.fontWeight = "bold";
titulo.style.backgroundColor = "#f0f4ff";
titulo.style.padding = "1rem";

Mas modificar estilos diretamente com JavaScript é considerado má prática para a maioria dos casos. A forma profissional é manipular classes CSS:

Manipulando classes CSS — classList

O classList é uma das APIs mais usadas no desenvolvimento front-end:

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

// Adicionar classe
botao.classList.add("ativo");
botao.classList.add("destacado", "grande"); // múltiplas de uma vez

// Remover classe
botao.classList.remove("destacado");

// Alternar (adiciona se não tem, remove se tem)
botao.classList.toggle("ativo");

// Verificar se tem uma classe
console.log(botao.classList.contains("ativo")); // true ou false

// Substituir uma classe por outra
botao.classList.replace("grande", "pequeno");

Este padrão é o correto: você define os estilos no CSS e usa o JavaScript apenas para adicionar ou remover classes:

/* No CSS */
.ativo {
  background-color: royalblue;
  color: white;
}

.oculto {
  display: none;
}

// No JavaScript — apenas gerencia as classes
botao.classList.toggle("ativo");
modal.classList.add("oculto");

Percorrendo a árvore do DOM

O DOM é uma árvore e você pode navegar entre os nós:

const lista = document.querySelector("ul");

console.log(lista.parentElement);      // elemento pai — <body>
console.log(lista.children);           // filhos diretos — HTMLCollection de <li>s
console.log(lista.firstElementChild);  // primeiro filho — primeiro <li>
console.log(lista.lastElementChild);   // último filho — último <li>

const primeiroItem = lista.firstElementChild;
console.log(primeiroItem.nextElementSibling);     // segundo <li>
console.log(primeiroItem.previousElementSibling); // null (é o primeiro)

Um exemplo completo

Vamos criar uma pequena página e manipulá-la com JavaScript:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>DOM em ação</title>
  <style>
    .destaque { color: royalblue; font-weight: bold; }
    .oculto { display: none; }
    .concluido { text-decoration: line-through; color: gray; }
  </style>
</head>
<body>
  <h1 id="titulo">Lista de Tarefas</h1>
  <p id="contador">0 tarefas</p>

  <ul id="lista">
    <li>Estudar JavaScript</li>
    <li>Praticar no console</li>
    <li>Construir um projeto</li>
  </ul>

  <div id="info" class="oculto">
    Você passou o mouse em: <span id="itemAtual"></span>
  </div>

  <script>
    // Selecionar elementos
    const titulo = document.querySelector("#titulo");
    const contador = document.querySelector("#contador");
    const lista = document.querySelector("#lista");
    const info = document.querySelector("#info");
    const itemAtual = document.querySelector("#itemAtual");
    const itens = document.querySelectorAll("li");

    // Atualizar o título
    titulo.classList.add("destaque");

    // Atualizar contador
    contador.textContent = `${itens.length} tarefas`;

    // Marcar primeiro item como concluído
    lista.firstElementChild.classList.add("concluido");

    // Interagir com cada item
    itens.forEach(item => {
      // Ao passar o mouse — mostra info
      item.addEventListener("mouseenter", () => {
        itemAtual.textContent = item.textContent;
        info.classList.remove("oculto");
      });

      // Ao tirar o mouse — oculta info
      item.addEventListener("mouseleave", () => {
        info.classList.add("oculto");
      });

      // Ao clicar — alterna concluído
      item.addEventListener("click", () => {
        item.classList.toggle("concluido");
      });
    });
  </script>
</body>
</html>

Salve como .html, abra no navegador e observe o DOM funcionando em tempo real. Veja como o JavaScript e o CSS trabalham juntos — JS gerencia as classes, CSS cuida da aparência.

DevTools — sua ferramenta de trabalho

Pressione F12 no navegador, vá na aba Elements (ou Elementos). Você verá a árvore do DOM ao vivo. Clique em qualquer elemento e no console digite:

// $0 sempre referencia o elemento selecionado no DevTools
console.log($0);
$0.style.border = "2px solid red";
$0.classList.add("destaque");

O DevTools é seu laboratório. Experimente tudo por lá antes de escrever no código.

Boas práticas ao trabalhar com DOM

// ✅ 1. Sempre verifique se o elemento existe antes de manipulá-lo
const botao = document.querySelector("#botaoEnviar");
if (botao) {
  botao.classList.add("ativo");
}

// ✅ 2. Cache seus seletores — não selecione o mesmo elemento várias vezes
// ❌ Ruim — seleciona 3 vezes
document.querySelector("#titulo").textContent = "Novo título";
document.querySelector("#titulo").classList.add("destaque");
document.querySelector("#titulo").style.display = "block";

// ✅ Bom — seleciona uma vez e reutiliza
const titulo = document.querySelector("#titulo");
titulo.textContent = "Novo título";
titulo.classList.add("destaque");
titulo.style.display = "block";

// ✅ 3. Prefira classList a style para manipular aparência
// ❌ Evite
elemento.style.color = "blue";
elemento.style.fontWeight = "bold";

// ✅ Prefira
elemento.classList.add("destaque");

// ✅ 4. Use textContent para texto simples — nunca innerHTML com dados do usuário
const input = document.querySelector("#busca");
const resultado = document.querySelector("#resultado");

// ❌ Vulnerável a XSS
resultado.innerHTML = input.value;

// ✅ Seguro
resultado.textContent = input.value;

Tarefa para você

Crie um arquivo HTML com a seguinte estrutura e manipule-o com JavaScript:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Exercício DOM</title>
</head>
<body>
  <h1 id="titulo">Meu Perfil</h1>
  <img id="avatar" src="https://via.placeholder.com/100" alt="Avatar">
  <p id="nome">Nome: ???</p>
  <p id="profissao">Profissão: ???</p>
  <ul id="habilidades"></ul>

  <script>
    // 1. Altere o título para seu nome
    // 2. Altere os parágrafos com seus dados reais
    // 3. Adicione 3 habilidades à lista dinamicamente
    //    (crie elementos <li> com JavaScript)
    // 4. Aplique uma cor de destaque ao título via classList
    // 5. Altere o src do avatar para uma imagem real
  </script>
</body>
</html>

Conclusão

Neste artigo você aprendeu:

  • O que é o DOM e como o navegador o constrói
  • Como o objeto document é o ponto de entrada
  • Os métodos de seleção: getElementById, querySelector, querySelectorAll
  • Como ler e modificar textContent e innerHTML
  • Como manipular atributos com getAttribute e setAttribute
  • Como gerenciar classes com classList
  • Como navegar pela árvore do DOM
  • Boas práticas de manipulação do DOM

No próximo artigo vamos aprender a criar e remover elementos dinamicamente com JavaScript — construindo elementos do zero e inserindo-os na página.

📌 Próximo artigo: Aula 12 — Selecionando e Manipulando Elementos em Profundidade

📚 Fontes e Referências

Comentários

Mais em Javascript

Callbacks: o começo de tudo
Callbacks: o começo de tudo

No artigo anterior entendemos o Event Loop &mdash; o mecanismo que permite ao...

Arrays: criando e manipulando listas
Arrays: criando e manipulando listas

At&eacute; agora trabalhamos com vari&aacute;veis que guardam um &uacute;nico...

LocalStorage e SessionStorage
LocalStorage e SessionStorage

Imagine que o usu&aacute;rio passou dez minutos preenchendo uma lista de tare...