EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Introdução ao DOM

O DOM é a única ponte entre o JavaScript e as páginas web. Sem o DOM, JS não seria nada mais que uma linguagem de computação pura. Com o DOM, JS pode "ver" páginas, modificar páginas e dar vida a elas.

📖 Resumo

O Que É o DOM?

DOM significa Document Object Model (Modelo de Objetos do Documento). Quando um navegador carrega HTML, ele não armazena como texto simples — ele traduz para uma árvore de objetos. Cada tag HTML vira um objeto (chamado de nó), e os relacionamentos de aninhamento entre tags viram relações pai-filho na árvore.

Pense no DOM como uma árvore invertida: no topo está a raiz (document), ramificando-se para baixo em galhos (html, head, body), e mais abaixo em folhas (div, p, span...).

Estrutura da Árvore DOM

A árvore DOM de uma página HTML simples se parece mais ou menos assim:

document
  └── html
       ├── head
       │    ├── meta
       │    └── title
       └── body
            ├── h1
            ├── p
            └── div
                 └── span

Tipos de Nós

Existem três tipos principais de nós no DOM:

Tipo de Nó Descrição Valor de nodeType
Nó de elemento Uma tag HTML, ex: p, div 1
Nó de texto Conteúdo de texto dentro de uma tag 3
Nó de atributo Um atributo de tag, ex: class, id 2 (obsoleto para uso geral)
HTML 
<p class="intro">Olá Mundo</p>

Nesta única linha: <p> é um nó de elemento, class="intro" é um nó de atributo, e Olá Mundo é um nó de texto. No desenvolvimento do dia a dia, nós de elemento são com os quais você mais vai trabalhar.

O Objeto document

document é o ponto de entrada para o DOM — o navegador fornece este objeto global automaticamente. Através dele você pode:

O Que o DOM Faz

O JS em si não consegue "ver" uma página web — ele só consegue calcular. O DOM fornece os "olhos" e as "mãos":

Sem o DOM, JS e HTML seriam duas coisas completamente separadas. O DOM conecta eles.

Exemplo: Visualizando a Estrutura do DOM

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Estrutura do DOM</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .tree { margin: 16px 0; padding: 16px; background: #f5f5f5; border-radius: 8px; font-family: monospace; font-size: 14px; line-height: 1.8; }
    .node { color: #4a90d9; font-weight: bold; }
    .text-node { color: #5cb85c; font-style: italic; }
    .attr-node { color: #f0ad4e; }
    .indent { margin-left: 24px; }
    .info { background: #e8f4fd; padding: 12px; border-radius: 6px; margin: 16px 0; }
  </style>
</head>
<body>
  <h1 id="mainTitle">Demo de Estrutura DOM</h1>
  <p class="intro">Este é um parágrafo</p>
  <div id="container">
    <span>Elemento inline</span>
  </div>
  <div id="output"></div>
  <script>
    function construirArvore(no, profundidade) {
      if (profundidade > 4) return "";
      var indentacao = "";
      for (var i = 0; i < profundidade; i++) indentacao += "  ";
      var resultado = "";

      if (no.nodeType === 1) {
        resultado += indentacao + '<span class="node">&lt;' + no.nodeName.toLowerCase();
        if (no.attributes && no.attributes.length > 0) {
          for (var a = 0; a < no.attributes.length && a < 3; a++) {
            resultado += ' <span class="attr-node">' +
              no.attributes[a].name + '="' + no.attributes[a].value + '"</span>';
          }
        }
        resultado += '&gt;</span>\n';
      } else if (no.nodeType === 3) {
        var texto = no.textContent.trim();
        if (texto) {
          resultado += indentacao + '<span class="text-node">"' + texto + '"</span>\n';
        }
        return resultado;
      }

      var filhos = no.childNodes;
      for (var c = 0; c < filhos.length; c++) {
        resultado += construirArvore(filhos[c], profundidade + 1);
      }

      if (no.nodeType === 1) {
        resultado += indentacao + '<span class="node">&lt;/' +
          no.nodeName.toLowerCase() + '&gt;</span>\n';
      }

      return resultado;
    }

    var arvoreStr = construirArvore(document.documentElement, 0);

    document.getElementById("output").innerHTML = `
      <h2>Árvore DOM Desta Página</h2>
      <div class="tree"><pre>${arvoreStr}</pre></div>
      <div class="info">
        <strong>Legenda de Cores:</strong>
        <span class="node">Azul = Nó de elemento</span> |
        <span class="text-node">Verde = Nó de texto</span> |
        <span class="attr-node">Laranja = Atributo</span>
      </div>
    `;
  </script>
</body>
</html>
▶ Experimente

Exemplo: Explorando o Objeto document

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>O Objeto document</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    .card { border: 2px solid #4a90d9; border-radius: 8px; padding: 16px; margin: 12px 0; background: #f0f7ff; }
    .card h3 { margin: 0 0 8px; color: #4a90d9; }
    .prop { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #e0e0e0; }
    .prop:last-child { border-bottom: none; }
    .key { font-weight: bold; color: #333; }
    .val { color: #4a90d9; font-family: monospace; word-break: break-all; }
    button { padding: 10px 20px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; margin: 4px; }
    .btn-blue { background: #4a90d9; color: #fff; }
    .btn-blue:hover { background: #357abd; }
    .btn-green { background: #5cb85c; color: #fff; }
    .btn-green:hover { background: #449d44; }
    .btn-orange { background: #f0ad4e; color: #fff; }
    .btn-orange:hover { background: #ec971f; }
    .demo-area { min-height: 60px; border: 2px dashed #ccc; border-radius: 8px; padding: 16px; margin: 12px 0; text-align: center; }
  </style>
</head>
<body>
  <h2>Explorando o Objeto document</h2>

  <div class="card">
    <h3>Propriedades Comuns do document</h3>
    <div id="props"></div>
  </div>

  <div class="card">
    <h3>Experimente Você Mesmo</h3>
    <button class="btn-blue" id="btnTitle">Alterar document.title</button>
    <button class="btn-green" id="btnBody">Alterar fundo do body</button>
    <button class="btn-orange" id="btnCreate">Criar um novo elemento</button>
    <button class="btn-blue" id="btnReset" style="background:#888;">Resetar</button>
  </div>

  <div class="demo-area" id="demoArea">
    <p>Esta é a área de demonstração</p>
  </div>

  <script>
    function mostrarProps() {
      var props = [
        ["document.title", document.title],
        ["document.URL", document.URL],
        ["document.domain", document.domain],
        ["document.contentType", document.contentType],
        ["document.documentElement", document.documentElement.nodeName],
        ["document.body", document.body.nodeName],
        ["document.head", document.head.nodeName],
        ["document.body.childElementCount", document.body.childElementCount],
        ["document.all.length", document.all.length + " elementos"]
      ];

      document.getElementById("props").innerHTML = props.map(function(p) {
        return '<div class="prop"><span class="key">' + p[0] +
          '</span><span class="val">' + p[1] + '</span></div>';
      }).join("");
    }

    mostrarProps();

    var contTitulo = 0;
    document.getElementById("btnTitle").addEventListener("click", function() {
      contTitulo++;
      document.title = "Alterado " + contTitulo + " vez(es)!";
      mostrarProps();
    });

    var coresFundo = ["#fff8e1", "#e8f5e9", "#fce4ec", "#e3f2fd", "#f3e5f5"];
    var indFundo = 0;
    document.getElementById("btnBody").addEventListener("click", function() {
      document.body.style.background = coresFundo[indFundo % coresFundo.length];
      indFundo++;
    });

    var contCriar = 0;
    document.getElementById("btnCreate").addEventListener("click", function() {
      contCriar++;
      var p = document.createElement("p");
      p.textContent = "Parágrafo criado #" + contCriar;
      p.style.color = "#4a90d9";
      p.style.fontWeight = "bold";
      document.getElementById("demoArea").appendChild(p);
      mostrarProps();
    });

    document.getElementById("btnReset").addEventListener("click", function() {
      document.title = "O Objeto document";
      document.body.style.background = "";
      document.getElementById("demoArea").innerHTML = "<p>Esta é a área de demonstração</p>";
      contTitulo = 0;
      indFundo = 0;
      contCriar = 0;
      mostrarProps();
    });
  </script>
</body>
</html>
▶ Experimente

Exemplo: Identificando Tipos de Nós

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Tipos de Nós</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    table { border-collapse: collapse; margin: 16px 0; width: 100%; max-width: 700px; }
    td, th { border: 1px solid #ddd; padding: 10px 14px; text-align: left; }
    th { background: #4a90d9; color: #fff; }
    .elem { background: #e3f2fd; }
    .text { background: #e8f5e9; }
    .note { background: #fff8e1; padding: 12px; border-radius: 6px; border-left: 4px solid #f0ad4e; margin: 16px 0; max-width: 700px; }
  </style>
</head>
<body>
  <h2>Tipos de Nós Explicados</h2>
  <p id="demo">Este é um parágrafo <span>contendo</span> múltiplos nós</p>
  <div id="output"></div>
  <script>
    var demo = document.getElementById("demo");
    var resultados = [];

    function analisarNo(no, profundidade) {
      var indentacao = "";
      for (var i = 0; i < profundidade; i++) indentacao += "│ ";
      var mapaTipos = { 1: "Nó de elemento", 3: "Nó de texto" };
      var nomeTipo = mapaTipos[no.nodeType] || "Outro (" + no.nodeType + ")";
      var detalhe = "";

      if (no.nodeType === 1) {
        detalhe = "&lt;" + no.nodeName.toLowerCase() + "&gt;";
      } else if (no.nodeType === 3) {
        var texto = no.textContent.trim();
        if (texto) detalhe = '"' + texto + '"';
        else return;
      }

      var cls = no.nodeType === 1 ? "elem" : "text";
      resultados.push(
        '<tr class="' + cls + '">' +
        "<td>" + indentacao + "</td>" +
        "<td><code>" + detalhe + "</code></td>" +
        "<td>" + nomeTipo + "</td>" +
        "<td>" + no.nodeType + "</td>" +
        "</tr>"
      );

      var filhos = no.childNodes;
      for (var c = 0; c < filhos.length; c++) {
        analisarNo(filhos[c], profundidade + 1);
      }
    }

    analisarNo(demo, 0);

    document.getElementById("output").innerHTML = `
      <p>Análise de <code>&lt;p id="demo"&gt;Este é um parágrafo &lt;span&gt;contendo&lt;/span&gt; múltiplos nós&lt;/p&gt;</code></p>
      <table>
        <tr><th>Nível</th><th>Conteúdo</th><th>Tipo de Nó</th><th>nodeType</th></tr>
        ${resultados.join("")}
      </table>
      <div class="note">
        💡 Nota: Quebras de linha e espaços entre tags também são nós de texto! Na prática, <code>children</code> (apenas nós de elemento) é mais útil que
        <code>childNodes</code> (todos os nós, incluindo texto).
      </div>
    `;
  </script>
</body>
</html>
▶ Experimente

❓ Perguntas Frequentes

P: O DOM faz parte do JavaScript? R: Não. O DOM é um padrão definido pelo W3C. O JavaScript apenas fornece APIs para interagir com ele. O Node.js não tem DOM porque não é um ambiente de navegador. Confundir DOM e JS é um erro comum de iniciantes.

P: Por que existem nós de texto vazios no childNodes? R: Quebras de linha e indentação no HTML são interpretadas como nós de texto no DOM. Por exemplo, o espaço em branco entre duas tags vira um nó de texto (contendo um caractere de nova linha). Se você quer apenas nós de elemento, use children em vez de childNodes.

P: Modificar o DOM afeta o desempenho da página? R: Sim. Toda modificação no DOM pode acionar um reflow e repaint do navegador. Manipulação frequente do DOM é um assassino de desempenho. Boa prática: construa todas as suas alterações na memória primeiro, depois escreva no DOM de uma vez.

📝 Atividades

  1. Abra as DevTools do navegador (F12), digite console.dir(document) no Console, e explore as propriedades e métodos do objeto document. Liste 5 que você reconhece ou acha interessante.
  2. Escreva código que obtenha o elemento body da página atual, imprima seu childElementCount (número de elementos filhos), depois use children para percorrer todos os elementos filhos e imprimir o nome da tag de cada um.
  3. Explique a diferença entre "nós de elemento" e "nós de texto". Dado <div>Olá <b>Mundo</b></div>, desenhe sua estrutura de árvore de nós e rotule o tipo de cada nó.
100%