Introdução ao DOM (Document Object Model)

Introdução ao DOM (Document Object Model)

O Document Object Model (DOM) é um dos conceitos mais importantes para desenvolvedores web. É a ponte que conecta seu código JavaScript com os elementos HTML que o usuário vê na tela. Dominar o DOM é essencial para criar experiências web interativas e dinâmicas.

O que é exatamente o DOM?

O DOM é uma representação estruturada do documento HTML que permite ao JavaScript acessar e manipular elementos da página. Pense no DOM como uma árvore de objetos:

• Cada elemento HTML se torna um "nó" nessa árvore
• Esses nós possuem propriedades e métodos que permitem sua manipulação
• A estrutura hierárquica reflete o aninhamento dos elementos HTML

A estrutura de árvore do DOM

Veja como um documento HTML simples seria representado como árvore DOM:

Este HTML cria uma estrutura em árvore como esta:

Acessando elementos do DOM

Existem várias formas de selecionar elementos do DOM em JavaScript:

Por ID (o mais específico)

Por classe (seleciona grupos de elementos)

Por nome da tag

Métodos modernos de seleção (os mais versáteis)

Os métodos querySelector() e querySelectorAll() permitem usar seletores CSS para encontrar elementos:

Navegando pela árvore DOM

Depois de selecionar um elemento, você pode navegar para elementos relacionados:

Exemplo prático: Navegação pelo DOM

Vamos criar uma função que destaca o elemento pai quando clicamos em um elemento:

O DOM é dinâmico!

Uma das características mais poderosas do DOM é que ele é dinâmico. Você pode:

1. Modificar elementos existentes
2. Criar novos elementos
3. Remover elementos
4. Responder a interações do usuário

Na próxima aula, exploraremos como manipular elementos do DOM, alterar conteúdo, criar elementos dinamicamente e muito mais. Veremos como transformar páginas estáticas em experiências interativas usando o poder do JavaScript e do DOM!