DOM

DOM (Document Object Model): A Ponte entre o JavaScript e o HTML

Se o HTML é o esqueleto (a estrutura) e o CSS é a roupa (o estilo), o DOM (Modelo de Objeto de Documento) é o mapa que permite ao JavaScript interagir com ambos.

O DOM não é uma linguagem de programação, mas sim uma interface de programação (API). Ele representa todo o seu documento HTML — cada tag, cada pedaço de texto e cada atributo — como uma estrutura em árvore hierárquica de objetos.

O Papel do DOM

Para um desenvolvedor Front-end, o DOM é fundamental porque:

1. Padroniza a Estrutura: Ele fornece uma representação uniforme e lógica do documento, que é compreendida por todos os navegadores.

2. Permite a Interatividade: Graças ao DOM, o JavaScript consegue identificar, acessar e modificar qualquer elemento na página. Quando você usa métodos como document.getElementById(), você está usando o DOM para encontrar um elemento.

3. Conecta as Linguagens: O DOM é o que transforma o HTML (texto estático) em objetos manipuláveis.

DOM em Ação

Todos os conceitos que vimos, como o uso do innerHTML para alterar o conteúdo ou a reação a um evento de clique (ações do usuário), dependem inteiramente do DOM.

• Quando o usuário clica em um botão, o DOM detecta o evento.

• O JavaScript usa o DOM para encontrar o elemento que será afetado.

• O JavaScript altera as propriedades desse elemento (como seu innerHTML ou style), e o navegador redesenha a página.

Em resumo, o DOM é o mediador invisível que permite que seu código JavaScript dinâmico dê vida ao seu layout HTML e CSS.

Eventos e Seletores de Elementos (Aplicação Prática)

Com a base teórica do DOM (Document Object Model) estabelecida, o próximo passo no Front-end é dominar as ferramentas que permitem a manipulação prática da sua página: os Seletores de Elementos e o tratamento de Eventos.

1. Seletores de Elementos: Encontrando Seu Alvo no DOM

Para manipular qualquer parte da página com JavaScript, é preciso primeiro encontrá-la no DOM. Os Seletores de Elementos fazem exatamente isso, usando a mesma sintaxe de CSS:

• document.querySelector(): Busca o primeiro elemento que corresponde a um seletor (#id, .classe, tag).

• document.querySelectorAll(): Retorna uma lista (NodeList) de todos os elementos que correspondem ao seletor.

2. Eventos (addEventListener): Reagindo às Ações do Usuário

O método addEventListener() é a maneira padrão de conectar uma função JavaScript a um evento (como um clique) que ocorre em um elemento, tornando o site interativo.

O ciclo completo da interatividade é: Localizar um elemento → Esperar por uma ação do usuário → Executar o código JavaScript para manipular o DOM.

Exemplo Prático: Um Botão Interativo

Veja como o DOM, o Seletor e o Evento trabalham juntos para mudar o conteúdo de um parágrafo quando um botão é clicado:

Estrutura HTML (O Conteúdo)

HTML

<p id="mensagem">O texto será alterado pelo JavaScript.</p>

<button id="botao-clique">Clique para Mudar</button>

Script JavaScript (A Interação)

JavaScript

// 1. SELETOR: Usamos querySelector para encontrar o botão pelo seu ID

const botao = document.querySelector("#botao-clique");

// 2. DOM: Usamos querySelector para encontrar o parágrafo pelo seu ID

const paragrafo = document.querySelector("#mensagem");

// 3. EVENTO: Adicionamos um "ouvinte" (listener) ao botão

// Quando o evento 'click' ocorrer, a função será executada

botao.addEventListener('click', function() {

    // 4. MANIPULAÇÃO: Dentro da função, usamos innerHTML para

    // mudar o conteúdo do parágrafo.

    paragrafo.innerHTML = "O conteúdo do DOM foi alterado!";

    // O JS manipula o DOM, e o navegador atualiza o visual.

});

Este exemplo demonstra o fluxo essencial do Front-end: usar um Seletor para buscar um elemento no DOM e, através de um Evento, executar a manipulação da página.