UA2 — DOM: Document Object Model — Programming and Data Persistence

UA2 — DOM: Document Object Model

O DOM é a representação em memória de um documento HTML ou XML — uma árvore de objetos que o navegador constrói ao carregar a página e que pode ser acessada e manipulada por qualquer linguagem de programação.

O que é o DOM

O DOM (Document Object Model) é uma interface de representação que define como documentos HTML e XML são lidos pelos navegadores. Ao carregar uma página, o navegador cria um objeto que representa a estrutura do documento e disponibiliza meios para que essa estrutura seja acessada e modificada por código.

O DOM não é uma linguagem de programação — ele é independente de linguagem. Qualquer linguagem (JavaScript, Python etc.) pode manipulá-lo. Na prática, JavaScript é a mais utilizada por rodar diretamente no navegador.

Existem dois padrões principais implementados pela maioria dos navegadores modernos:

W3C DOM
WHATWG DOM

Alguns navegadores estendem esses padrões, por isso é preciso atenção ao usar recursos não padronizados — o documento pode ser processado por DOMs diferentes em navegadores diferentes.

Estrutura da árvore DOM

O DOM é organizado como uma árvore de objetos. O objeto window é a raiz — ele representa o navegador e possui três filhos diretos:

document — objeto raiz do documento HTML; pai de todos os elementos da página.
location — captura a URL atual e permite redirecionar o navegador.
history — armazena o histórico de URLs visitadas no contexto de navegação.

DOM — Estrutura da Web Dinâmica — Infográfico: níveis de especificação do DOM segundo a W3C

Com o modelo DOM, o JavaScript pode:

Criar e alterar elementos e atributos HTML dinamicamente
Modificar estilos CSS sem recarregar a página
Reagir a eventos do usuário (cliques, teclas, scroll)
Enviar e receber dados via AJAX sem recarregar a página

Acessando o DOM

Para manipular o DOM, usa-se os objetos document ou window dentro de uma tag <script> ou em um arquivo .js externo.

Exemplo simples — alerta ao carregar a página:

<body onload="window.alert('Hello DOM World!');">

Exemplo criando um título dinamicamente:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="utf-8"/>
  <title>Título da Página</title>
  <script>
    window.onload = function() {
      var heading = document.createElement("h1");
      var heading_text = document.createTextNode("Texto do Título");
      heading.appendChild(heading_text);
      document.body.appendChild(heading);
    }
  </script>
</head>
<body></body>
</html>

Exemplo capturando valor de um campo de texto:

<script>
  var capturado = "";
  function capturar() {
    capturado = document.getElementById('valor').value;
    document.getElementById('valorDigitado').innerHTML = capturado;
  }
</script>
<input type="text" id="valor">
<input type="submit" onclick="capturar()" value="Clique aqui!">
<p id="valorDigitado"></p>

Propriedades fundamentais do objeto `document`

Propriedade / Método	Descrição
`documentElement`	Recupera o elemento raiz `<html>`
`getElementById(id)`	Retorna o elemento com o ID correspondente
`createElement(tag)`	Cria um novo nó de elemento
`createAttribute(name)`	Cria um novo nó de atributo
`createTextNode(text)`	Cria um novo nó de texto
`getElementsByTagName(tag)`	Retorna lista de elementos pela tag informada
`appendChild(node)`	Insere um novo elemento filho
`removeChild(node)`	Remove um elemento filho
`parentNode`	Retorna o nó pai de um dado nó

Tipos de dados do DOM

Tipo	Descrição
`Document`	Objeto raiz do documento
`Node`	Todo objeto no documento HTML é um nó — de elemento, atributo ou texto
`Element`	Baseado em `Node`; representa um elemento HTML
`NodeList`	Lista de elementos acessada por índice: `list[1]` ou `list.item(1)`
`Attribute`	Nós de atributo (menos utilizados que nós de elemento)
`NamedNodeMap`	Coleção acessada por nome ou índice; sem ordem específica

Interfaces do DOM: Core, HTML e CSS

Core API básica suficiente para acessar e manipular conteúdos HTML e XML. Permite popular um objeto Document usando apenas chamadas da própria API DOM.

HTML (HTMLDocument) Interface para documentos HTML. Dá acesso a recursos do navegador, como a janela ou aba (Window) em que a página está sendo exibida.

CSS (Style) Interface associada ao documento que permite manipular estilos via JavaScript. Exemplo: mudar a cor de um elemento ao clicar em um botão:

<button onclick="document.getElementById('id1').style.color = 'red'">
  Clique em mim!
</button>

History Interface que fornece acesso ao histórico de navegação do contexto atual.

Atenção — conteúdo desatualizado

O material do livro (2019) usa padrões que ainda funcionam, mas que o mercado abandonou:

var — substituído por const e let (ES6+, 2015), que têm escopo de bloco e evitam bugs silenciosos
onclick="..." inline no HTML — mistura comportamento com estrutura; a prática atual é separar completamente via addEventListener
getElementById e getElementsByTagName como selectors principais — querySelector/querySelectorAll são mais flexíveis e amplamente preferidos
element.style.property = 'value' para alterações visuais — classList.toggle() e classList.add/remove são preferidos por manter o CSS no CSS
innerHTML com dados do usuário — vetor direto de XSS; usar textContent para texto puro

Práticas Modernas

Seletores modernos querySelector() e querySelectorAll() aceitam qualquer seletor CSS — são mais expressivos e substituem getElementById, getElementsByTagName e getElementsByClassName na maioria dos casos:

const btn = document.querySelector('#meu-botao');
const itens = document.querySelectorAll('.item');

addEventListener em vez de handlers inline Separa comportamento do HTML, permite múltiplos listeners no mesmo elemento e facilita testes:

document.querySelector('#btn').addEventListener('click', function() {
  // lógica aqui
});

classList para manipulação de estilos Manter CSS no CSS e alternar classes via JavaScript — muito mais manutenível que element.style.color = 'red':

element.classList.add('ativo');
element.classList.remove('oculto');
element.classList.toggle('expandido');

textContent em vez de innerHTML para dados do usuário innerHTML interpreta HTML — se o conteúdo vier do usuário, é XSS. Usar textContent para texto puro:

// Arriscado:
p.innerHTML = campoInput.value;

// Seguro:
p.textContent = campoInput.value;

const/let em vez de var var tem escopo de função e comportamento de hoisting que causa bugs difíceis de rastrear. const e let têm escopo de bloco — preferir const por padrão:

const heading = document.createElement('h1');
let contador = 0;

Virtual DOM e frameworks React, Vue e Angular introduziram o conceito de Virtual DOM: o desenvolvedor descreve o estado da UI e o framework calcula as alterações mínimas no DOM real. Para UIs simples, manipulação direta do DOM é suficiente; para aplicações complexas, frameworks evitam inconsistências e melhoram performance.

Web Components Padrão nativo W3C para criar componentes reutilizáveis com DOM encapsulado (Shadow DOM), sem dependência de frameworks. Suportados por todos os navegadores modernos desde 2020.

Dicas para a Prova

Para obter um elemento pelo ID use getElementById() — não querySelector() nem getElementsByTagName().
Para alterar estilo via JavaScript: document.getElementById('id').style.color = 'blue'.
Os filhos diretos do window são: location, document e history — não são body, html ou header.
A linguagem de script para manipular o DOM é JavaScript — HTML, CSS e XML não são linguagens de script.
Os dois padrões DOM modernos são W3C DOM e WHATWG DOM — não HTTP, FTP ou SSH.
O DOM não é uma linguagem de programação — é uma interface independente de linguagem.
O objeto document é a raiz do documento HTML; o objeto window representa o próprio navegador.

Referências bibliográficas desta UA

NEUMANN, F. B. Programação Front End II. Porto Alegre: SAGAH.
MDN Web Docs. Introdução ao DOM. Mozilla Developer Network, 2019.
W3C. Document Object Model (Core) Level 1. World Wide Web Consortium, 1998.

UA1 — Introdução à Manipulação de Arquivos UA3 — Trabalhando com links e formulários