germanosilva.dev

O que é DOM

O que é o DOM (Document Object Model) no contexto de navegadores com JavaScript?

O DOM (Document Object Model) é uma interface de programação que representa a estrutura de um documento HTML ou XML como uma árvore de objetos. Ele permite que linguagens de programação, como o JavaScript, interajam dinamicamente com o conteúdo, estrutura e estilo da página web.

🔹 Como o DOM funciona?

Quando um navegador carrega uma página web, ele interpreta o código HTML e constrói um modelo estruturado do documento na memória. Esse modelo é o DOM, que organiza os elementos da página em uma hierarquia de nós.

Por exemplo, o seguinte código HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Exemplo DOM</title>
</head>
<body>
    <h1 id="titulo">Olá, Mundo!</h1>
    <p class="descricao">Esse é um exemplo de manipulação do DOM.</p>
</body>
</html>

É transformado em uma árvore DOM assim:

Document
│
├── html
│   ├── head
│   │   ├── title ("Exemplo DOM")
│   ├── body
│       ├── h1 (id="titulo") ("Olá, Mundo!")
│       ├── p (class="descricao") ("Esse é um exemplo de manipulação do DOM.")

Essa estrutura permite que o JavaScript acesse e manipule os elementos da página de forma dinâmica.

🔹 Principais Componentes do DOM

1️⃣ Nós (Nodes)

Cada parte do documento HTML é representada como um nó no DOM. Existem diferentes tipos de nós, como:

  • Elemento (Element Nodes) – Representam tags HTML (<h1>, <p>, <div>, etc.).
  • Atributo (Attribute Nodes) – Representam atributos dos elementos (id, class, src, etc.).
  • Texto (Text Nodes) – Representam o conteúdo textual dentro dos elementos.
  • Comentário (Comment Nodes) – Representam comentários <!-- Isso é um comentário -->.

2️⃣ Árvore DOM

A estrutura do DOM segue uma hierarquia em forma de árvore:

  • O nó raiz é o document (representando o documento HTML inteiro).
  • Dentro dele, temos elementos filhos (<html>, <head>, <body>, etc.).
  • Cada elemento pode ter outros elementos filhos, atributos e nós de texto.

3️⃣ Objeto document

O objeto document é a principal interface do DOM em JavaScript e permite acessar elementos da página.

Exemplo de acesso ao título da página:

console.log(document.title); // "Exemplo DOM"

🔹 Manipulação do DOM com JavaScript

🔸 Selecionando Elementos

Podemos usar vários métodos para selecionar elementos:

getElementById()

Seleciona um elemento pelo seu id.

const titulo = document.getElementById("titulo");
console.log(titulo.textContent); // "Olá, Mundo!"

getElementsByClassName()

Seleciona elementos por classe (retorna uma coleção).

const paragrafos = document.getElementsByClassName("descricao");
console.log(paragrafos[0].textContent);

querySelector() e querySelectorAll()

Seleciona elementos usando seletores CSS.

const titulo = document.querySelector("#titulo"); // Pega o primeiro que corresponder
const todosParagrafos = document.querySelectorAll(".descricao"); // Pega todos os correspondentes

🔸 Modificando Elementos

Podemos alterar o conteúdo e atributos dos elementos.

Modificar Texto (textContent e innerHTML)

titulo.textContent = "Novo título!";
titulo.innerHTML = "<span style='color:red'>Novo título!</span>";

Alterar Atributos (setAttribute() e propriedades diretas)

titulo.setAttribute("class", "novo-estilo");
titulo.id = "novo-id";

Alterar Estilos (style)

titulo.style.color = "blue";
titulo.style.fontSize = "24px";

🔸 Criando e Removendo Elementos

Podemos criar, adicionar e remover elementos dinamicamente.

Criar Elementos (createElement())

const novoParagrafo = document.createElement("p");
novoParagrafo.textContent = "Parágrafo dinâmico!";
document.body.appendChild(novoParagrafo);

Remover Elementos (remove())

titulo.remove(); // Remove o título da página

🔹 Eventos no DOM

O JavaScript permite que adicionemos interatividade ao DOM por meio de eventos.

Exemplo: Adicionar um evento de clique em um botão.

<button id="meuBotao">Clique aqui</button>
const botao = document.getElementById("meuBotao");

botao.addEventListener("click", function() {
    alert("Botão clicado!");
});

O DOM é essencial para manipular páginas web com JavaScript. Ele permite:
✅ Selecionar elementos
✅ Modificar conteúdo e estilos
✅ Criar e remover elementos dinamicamente
✅ Responder a eventos do usuário

É a base para criar interfaces dinâmicas e interativas na web! 🚀