Entendendo o DOM JavaScript

O que é o DOM?

O Document Object Model (DOM) é uma interface de programação para documentos HTML e XML. Ele representa a estrutura de um documento como uma árvore de objetos, onde cada nó é um objeto representando uma parte do documento.

Visualização da Árvore DOM

document

html

head

title

Estrutura em Árvore

O DOM organiza todos os elementos HTML em uma estrutura hierárquica de árvore, onde cada elemento é um nó. Isso permite que você navegue facilmente entre elementos pais, filhos e irmãos.

Manipulação Dinâmica

Com JavaScript, você pode acessar e modificar qualquer elemento do DOM em tempo real, alterando conteúdo, estilos, atributos e até mesmo criando ou removendo elementos.

Seu Primeiro Script DOM

Código JavaScript:

// Seleciona um elemento pelo ID
const titulo = document.getElementById('titulo');

// Altera o conteúdo do elemento
titulo.textContent = 'DOM Modificado!';

// Altera o estilo do elemento
titulo.style.color = '#4f46e5';
titulo.style.fontWeight = 'bold';

Resultado:

Título Original

Este é um exemplo de como o DOM permite modificar elementos HTML dinamicamente com JavaScript.

Estrutura do DOM

O DOM representa um documento HTML como uma árvore hierárquica. Cada elemento, atributo e texto no HTML se torna um nó no DOM com relacionamentos específicos entre si.

Tipos de Nós no DOM

Document:
O nó raiz que representa todo o documento HTML.
Element:
Representa elementos HTML como <div>, <p>, <a>, etc.
Text:
O conteúdo textual dentro de um elemento.

Attribute:
Representa atributos de elementos HTML (id, class, etc).
Comment:
Comentários HTML que não são exibidos na página.
DocumentFragment:
Um contêiner leve para armazenar nós temporariamente.

Navegando pelo DOM

O JavaScript fornece várias propriedades para navegar entre os nós do DOM:

Código JavaScript:

// Seleciona o elemento pai
const lista = document.getElementById('lista');

// Acessa o primeiro filho
const primeiroItem = lista.firstElementChild;
primeiroItem.style.color = '#4f46e5';

// Acessa o próximo irmão
const segundoItem = primeiroItem.nextElementSibling;
segundoItem.style.fontWeight = 'bold';

// Acessa o elemento pai
const pai = segundoItem.parentElement;
pai.style.backgroundColor = '#f3f4f6';

Resultado:

Propriedades de Navegação

parentNode - Nó pai
childNodes - Todos os nós filhos
firstChild - Primeiro nó filho
lastChild - Último nó filho

nextSibling - Próximo nó irmão
previousSibling - Nó irmão anterior
children - Elementos filhos
parentElement - Elemento pai

Experimente: Navegação Interativa

Elemento Pai

Filho 1

Filho 2

Filho 3

Seleção de Elementos

Para manipular elementos do DOM, primeiro precisamos selecioná-los. JavaScript oferece vários métodos para selecionar elementos de diferentes maneiras.

Métodos de Seleção

Seleção por ID

document.getElementById('meuId')

Seleciona um único elemento pelo atributo ID.

Seleção por Classe

document.getElementsByClassName('minhaClasse')

Retorna uma coleção de elementos com a classe especificada.

Seleção por Tag

document.getElementsByTagName('div')

Retorna uma coleção de elementos com a tag especificada.

Seleção por Seletor CSS

document.querySelector('.classe > p')

Seleciona o primeiro elemento que corresponde ao seletor CSS.

Seleção Múltipla por CSS

document.querySelectorAll('ul li')

Retorna todos os elementos que correspondem ao seletor CSS.

Seleção por Nome

document.getElementsByName('nome')

Retorna elementos com o atributo name especificado.

Exemplo Prático de Seleção

Código JavaScript:

// Seleciona por ID
const titulo = document.getElementById('titulo-selecao');
titulo.style.color = '#4f46e5';
// Seleciona todos os itens da lista
const itens = document.querySelectorAll('#lista-selecao li');
itens.forEach((item, index) => {
  item.style.backgroundColor = index % 2 === 0 ? 
    '#f3f4f6' : 'white';
  item.style.padding = '8px';
});

// Seleciona apenas os itens com a classe 'destaque'
const destaques = document.getElementsByClassName('destaque');
for (let i = 0; i < destaques.length; i++) {
  destaques[i].style.fontWeight = 'bold';
  destaques[i].style.borderLeft = '3px solid #4f46e5';
  destaques[i].style.paddingLeft = '10px';
}

Resultado:

Lista de Itens

Item normal
Item com destaque
Item normal
Item com destaque
Item normal

Playground de Seleção

Experimente selecionar elementos usando diferentes métodos:

Playground de Seleção

Selecione elementos desta área usando os controles abaixo.

Caixa 1 (ID: box1)

Caixa 2 (ID: box2, Classe: box destaque)

Caixa 3 (ID: box3, Classe: box)

Item 1 (Classe: destaque)
Item 2
Item 3 (Classe: destaque)

Método de Seleção:

Valor do Seletor:

Os resultados da seleção aparecerão aqui...

Manipulação do DOM

Após selecionar elementos, podemos manipulá-los de diversas formas: alterar conteúdo, modificar estilos, adicionar ou remover elementos, e muito mais.

Manipulação de Conteúdo

Código JavaScript:

// Alterar texto de um elemento
document.getElementById('texto-simples').textContent = 
  'Texto alterado com textContent!';
// Alterar HTML de um elemento
document.getElementById('texto-html').innerHTML = 
  'Texto com formatação HTML usando innerHTML!';
// Obter o valor de um input
const valorInput = document.getElementById('meu-input').value;
document.getElementById('valor-input').textContent = valorInput;
// Alterar o valor de um input
document.getElementById('meu-input').value = 'Novo valor!';

Resultado:

Este é um texto simples.

Este texto contém HTML.

Valor do input: Texto inicial

Manipulação de Atributos e Estilos

Código JavaScript:

// Manipular atributos
const link = document.getElementById('meu-link');
link.setAttribute('href', 'https://www.example.com');
link.setAttribute('target', '_blank');

// Manipular classes
const elemento = document.getElementById('elemento-classes');
elemento.classList.add('destaque');
elemento.classList.remove('normal');
elemento.classList.toggle('arredondado');

// Manipular estilos diretamente
const caixa = document.getElementById('caixa-estilo');
caixa.style.backgroundColor = '#4f46e5';
caixa.style.color = 'white';
caixa.style.padding = '10px';
caixa.style.borderRadius = '8px';

Resultado:

Este é um link

Este elemento terá suas classes alteradas

Esta caixa terá seu estilo alterado diretamente

Criação e Remoção de Elementos

Código JavaScript:

// Criar um novo elemento
const novoParagrafo = document.createElement('p');
novoParagrafo.textContent = 'Este parágrafo foi criado com JavaScript!';
novoParagrafo.className = 'novo-elemento';
novoParagrafo.style.color = '#4f46e5';

// Adicionar o elemento ao DOM
const container = document.getElementById('container-elementos');
container.appendChild(novoParagrafo);

// Criar e inserir um elemento antes de outro
const novoItem = document.createElement('li');
novoItem.textContent = 'Novo item no topo';
novoItem.className = 'novo-elemento';
const lista = document.getElementById('lista-elementos');
lista.insertBefore(novoItem, lista.firstChild);

// Remover um elemento
const itemRemover = document.getElementById('item-remover');
itemRemover.parentNode.removeChild(itemRemover);

Resultado:

Container para novos elementos:

Lista de elementos:

Item 1
Item para remover
Item 3

Eventos do DOM

Os eventos permitem que o JavaScript execute código quando algo acontece, como um clique, carregamento da página, ou entrada de dados.

Tipos de Eventos Comuns

Eventos de Mouse

click - Clique do mouse
dblclick - Clique duplo
mouseover - Mouse sobre
mouseout - Mouse saiu
mousemove - Mouse movendo

Eventos de Teclado

keydown - Tecla pressionada
keyup - Tecla liberada
keypress - Tecla pressionada (caractere)

Eventos de Formulário

submit - Envio de formulário
change - Valor alterado
focus - Elemento focado
blur - Elemento perdeu foco
input - Entrada de dados

Adicionando Event Listeners

Código JavaScript:

// Método addEventListener
const botao = document.getElementById('meu-botao');
botao.addEventListener('click', function() {
  document.getElementById('resultado-evento').textContent = 
    'Botão clicado!';
  this.style.backgroundColor = '#4f46e5';
  this.style.color = 'white';
});

// Evento de mouse
const caixa = document.getElementById('caixa-hover');
caixa.addEventListener('mouseover', function() {
  this.style.backgroundColor = '#f3f4f6';
  this.style.transform = 'scale(1.05)';
});
caixa.addEventListener('mouseout', function() {
  this.style.backgroundColor = 'white';
  this.style.transform = 'scale(1)';
});

// Evento de teclado
const input = document.getElementById('input-teclado');
input.addEventListener('keyup', function(event) {
  document.getElementById('tecla-pressionada').textContent = 
    `Tecla: ${event.key}, Código: ${event.keyCode}`;
});

Resultado:

Resultado do evento aparecerá aqui.

Passe o mouse sobre esta caixa

Digite algo:

Informações da tecla aparecerão aqui.

Propagação de Eventos

Os eventos no DOM se propagam de duas formas: captura (do documento para o elemento) e borbulhamento (do elemento para o documento).

Código JavaScript:

// Adicionar eventos aos elementos aninhados
document.getElementById('avo').addEventListener('click', function(e) {
  addLog('Avô clicado (borbulhamento)');
});

document.getElementById('pai').addEventListener('click', function(e) {
  addLog('Pai clicado (borbulhamento)');
});

document.getElementById('filho').addEventListener('click', function(e) {
  addLog('Filho clicado (borbulhamento)');
});

// Evento com captura (terceiro parâmetro true)
document.getElementById('avo').addEventListener('click', function(e) {
  addLog('Avô clicado (captura)', 'blue');
}, true);

document.getElementById('pai').addEventListener('click', function(e) {
  addLog('Pai clicado (captura)', 'blue');
}, true);

// Parar propagação
document.getElementById('botao-parar').addEventListener('click', function(e) {
  addLog('Propagação interrompida!', 'red');
  e.stopPropagation();
});

// Função para adicionar log
function addLog(message, color = 'black') {
  const log = document.getElementById('event-log');
  const entry = document.createElement('div');
  entry.textContent = message;
  entry.style.color = color;
  log.appendChild(entry);
  
  // Limitar o número de entradas
  if (log.children.length > 8) {
    log.removeChild(log.firstChild);
  }
}

Resultado:

Elemento Avô

Elemento Pai

Elemento Filho

Log de Eventos:

Desafios Práticos

Coloque em prática o que aprendeu com estes desafios interativos. Tente resolver cada um deles para testar seu conhecimento sobre o DOM.

Desafio 1: Lista de Tarefas

Crie uma aplicação simples de lista de tarefas que permita adicionar, marcar como concluída e remover tarefas.

Aprender sobre seleção de elementos
Praticar manipulação do DOM
Completar o desafio da lista de tarefas

Dicas para o Desafio:

Use createElement() para criar novos itens da lista
Adicione event listeners para os botões de adicionar e remover
Use appendChild() para adicionar novos itens à lista
Use removeChild() para remover itens da lista
Manipule classes CSS para marcar tarefas como concluídas

Desafio 2: Galeria de Imagens

Crie uma galeria de imagens com miniaturas que, ao serem clicadas, exibem a imagem em tamanho maior.

Dicas para o Desafio:

Adicione event listeners de clique a cada miniatura
Atualize o src da imagem principal quando uma miniatura for clicada
Adicione uma classe para destacar a miniatura selecionada
Implemente transições suaves para melhorar a experiência do usuário

Desafio 3: Formulário com Validação

Crie um formulário com validação em tempo real que verifica os campos à medida que o usuário digita.

Nome de Usuário

Email

Senha

Confirmar Senha

Dicas para o Desafio:

Use o evento input para validar os campos em tempo real
Adicione ou remova classes para indicar campos válidos e inválidos
Exiba mensagens de erro específicas para cada tipo de validação
Habilite o botão de envio apenas quando todos os campos estiverem válidos
Use expressões regulares para validar o formato do email

Aprenda a manipular o DOM com JavaScript

O que é o DOM?

Visualização da Árvore DOM

Estrutura em Árvore

Manipulação Dinâmica

Seu Primeiro Script DOM

Título Original

Estrutura do DOM

Tipos de Nós no DOM

Navegando pelo DOM

Propriedades de Navegação

Experimente: Navegação Interativa

Elemento Pai

Seleção de Elementos

Métodos de Seleção

Seleção por ID

Seleção por Classe

Seleção por Tag

Seleção por Seletor CSS

Seleção Múltipla por CSS

Seleção por Nome

Exemplo Prático de Seleção

Lista de Itens

Playground de Seleção

Playground de Seleção

Manipulação do DOM

Manipulação de Conteúdo

Manipulação de Atributos e Estilos

Criação e Remoção de Elementos

Container para novos elementos:

Lista de elementos:

Eventos do DOM

Tipos de Eventos Comuns

Eventos de Mouse

Eventos de Teclado

Eventos de Formulário

Adicionando Event Listeners

Propagação de Eventos

Desafios Práticos

Desafio 1: Lista de Tarefas

Dicas para o Desafio:

Desafio 2: Galeria de Imagens

Dicas para o Desafio:

Desafio 3: Formulário com Validação

Dicas para o Desafio: