O que é DOM no JavaScript? Guia e Prática de Manipulação.

Intradução

Se você quer criar páginas dinâmicas e interativas, entender o DOM é um requisito obrigatório. Sem ele, o JavaScript seria apenas uma linguagem executando lógicas isoladas no navegador, sem qualquer capacidade de alterar o que o usuário enxerga na tela.

Neste artigo, você vai aprender o que é o DOM, como o navegador constrói essa estrutura em árvore, os principais métodos para selecionar ou modificar elementos e um exemplo prático completo em JavaScript Vanilla.

O que é o DOM e para que ele serve?

O DOM (Document Object Model, ou Modelo de Objeto do Documento) é uma interface de programação (API) que representa documentos HTML ou XML como uma estrutura de objetos.

Quando o navegador carrega uma página, ele lê o código HTML e constrói uma representação em memória do documento. Essa representação é o DOM.

Através do DOM, linguagens como o JavaScript ganham acesso aos elementos da página para alterar textos, modificar estilos CSS, adicionar eventos de clique, inserir novos elementos ou remover nós existentes em tempo real.

Como funciona a árvore de nós do DOM.

A estrutura do DOM é organizada em forma de árvore hierárquica, onde cada parte do documento HTML é representada por um nó (node).

No topo dessa hierarquia está o objeto global document, que serve como o ponto de entrada principal para qualquer manipulação.

Document Node: O nó raiz que representa todo o documento HTML.
Element Node: As tags HTML (ex: <html>, <body>, <div>, <h1>, <button>).
Attribute Node: Os atributos associados às tags (ex: class, id, src, href).
Text Node: O conteúdo textual dentro de uma tag (ex: o texto dentro de um parágrafo <p>).

Principais métodos de manipulação do DOM.

Para interagir com a página, você precisa primeiro selecionar os elementos e, em seguida, alterar suas propriedades ou escutar eventos.

Métodos de Criação e Modificação.

document.createElement('tag'): Cria um novo elemento HTML em memória.
element.textContent: Define ou recupera o conteúdo de texto do elemento.
element.classList.add('classe') / .remove('classe'): Gerencia as classes CSS do elemento.
parentElement.appendChild(novoElemento): Insere um novo nó filho no final do elemento pai.

Dica de Ouro: Evite usar innerHTML para inserir dados que vêm de entradas de usuários (como formulários). O uso indevido de innerHTML pode abrir brechas de segurança para ataques do tipo XSS (Cross-Site Scripting). Prefira utilizar textContent ou createElement() com appendChild().

Tabela comparativa: Seleção e Manipulação de Conteúdo.

Método / Propriedade	Tipo de Retorno	Uso Recomendado
`querySelector()`	Elemento único	Seleções genéricas via classes ou seletores complexos
`querySelectorAll()`	NodeList (Lista)	Iterar sobre múltiplos elementos do mesmo tipo
textContent	Texto simples	Inserir ou ler textos com segurança
`innerHTML`	String HTML	Inserir marcação HTML dinâmica tratada e segura
`addEventListener()`	Escutador de eventos	Reagir a cliques, digitação, scroll ou envios de formulário

Exemplo prático em JavaScript Vanilla.

Veja abaixo como criar uma lista de tarefas interativa simples, aplicando seleção, criação de elementos e manipulação de eventos:

Estrutura HTML base.

<!-- index.html -->
<div class="container">
  <h2>Minha Lista de Tarefas</h2>
  <input type="text" id="task-input" placeholder="Digite uma tarefa...">
  <button id="add-btn">Adicionar</button>
  <ul id="task-list"></ul>
</div>

Manipulação via JavaScript.

// script.js
// 1. Seleção dos elementos do DOM
const taskInput = document.getElementById('task-input');
const addBtn = document.getElementById('add-btn');
const taskList = document.getElementById('task-list');

// 2. Função para adicionar nova tarefa
function addTask() {
  const taskText = taskInput.value.trim();

  if (taskText === '') {
    alert('Por favor, digite uma tarefa!');
    return;
  }

  // Cria o elemento <li> em memória
  const li = document.createElement('li');
  li.textContent = taskText;

  // Adiciona evento de clique para remover a tarefa
  li.addEventListener('click', () => {
    li.remove();
  });

  // Insere o <li> dentro da <ul> no DOM
  taskList.appendChild(li);

  // Limpa o campo de entrada
  taskInput.value = '';
}

// 3. Atribuição do evento ao botão
addBtn.addEventListener('click', addTask);

Conclusão

Manipular o DOM com JavaScript é o núcleo da interatividade web no front-end. Ao dominar a seleção de elementos, a escuta de eventos e a alteração dinâmica de propriedades, você ganha autonomia para construir interfaces ricas e reativas.

Apesar da popularidade de frameworks como React ou Vue, dominar o DOM nativo em JS Vanilla traz uma base sólida indispensável para resolver problemas de alta performance e depuração de código.

Você costuma manipular o DOM diretamente com JavaScript Vanilla nos seus projetos ou recorre a algum framework/biblioteca? Deixe seu comentário abaixo!

📌 Navegue por tópicos