DOM

Modelo de Objeto de Documento

O que é o DOM (Document Object Model)?

Imagine o seu site como uma casa. Cada elemento HTML (como <p>, <h1> ou <div>) é como um cômodo ou móvel dessa casa. O DOM é o mapa completo dessa casa. Ele representa a estrutura do seu HTML em forma de árvore, onde o JavaScript pode "andar" para encontrar, modificar ou até criar novos "móveis". É a ponte entre o JavaScript e a página que o usuário vê.

Como o JavaScript "enxerga" a página?

Para manipular algo, o JavaScript precisa selecioná-lo primeiro. Alguns métodos comuns:

getElementById("id") → Como ter o endereço exato de um cômodo. Seleciona um único elemento pelo ID.
getElementsByClassName("classe") → Como ver todos os cômodos com uma cor de parede específica. Retorna uma lista de elementos com a mesma classe.
getElementsByTagName("tag") → Como pedir para ver todos os banheiros da casa. Retorna todos os elementos de uma determinada tag.
querySelector("seletor") → É o GPS que encontra o primeiro elemento que corresponde a um seletor CSS.
querySelectorAll("seletor") → Igual ao GPS, mas retorna todos os elementos que correspondem ao seletor.

Como fazer a página "ganhar vida" com Eventos?

Os eventos são ações do usuário, como cliques, movimentos do mouse ou digitação. Eles fazem a página reagir às interações.

Exemplo:

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

btn.addEventListener("click", () => {

alert("Botão clicado!");

});

Explicando passo a passo:

Seleciona o elemento (no caso, um botão).
"Escuta" o que acontece com ele usando addEventListener().
Define o evento que quer "ouvir" ("click").
Especifica o que fazer quando o evento acontecer (executar a função que mostra o alerta).

Organizando informações com Arrays e Objetos

Para que o JavaScript funcione, ele precisa armazenar e organizar dados.

Arrays - Pense em um array como uma lista de compras — uma lista ordenada de itens.

Adicionar itens: push() (final) ou unshift() (início)
Remover itens: pop() (final) ou shift() (início)
Acessar ou alterar itens: array[0] (primeiro item)

Exemplo:

let frutas = ["maçã", "banana"];

frutas.push("laranja"); // adiciona no final

console.log(frutas[0]); // "maçã"

Objetos - Pense em um objeto como um cartão de identificação, armazenando informações em pares chave:valor.

Exemplo:

const pessoa = {

nome: "Leal",

idade: 25

};

console.log(pessoa.nome); // "Leal"

Esses três conceitos — DOM, eventos, arrays e objetos — são os pilares para construir páginas web dinâmicas e interativas.