path: root/files/pt-br/dom/referencia_do_dom/introdução/index.html

---
title: Introdução ao DOM
slug: DOM/Referencia_do_DOM/Introdução
translation_of: Web/API/Document_Object_Model/Introduction
---
<p><span class="seoSummary">O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Neste guia, apresentaremos brevemente o DOM. Veremos como o DOM representa um documento {{Glossary ("HTML")}} ou {{Glossary ("XML")}} na memória e como você usa APIs para criar aplicativos e conteúdo da Web.</span></p>

<h2 id="What_is_the_DOM" name="What_is_the_DOM">O que é o DOM?</h2>

<p>O Document Object Model (<strong>DOM</strong>) é uma interface de programação para os documentos HTML e XML. Representa a página de forma que os programas possam alterar a estrutura do documento, alterar o estilo e conteúdo. O DOM representa o documento com nós e objetos, dessa forma, as linguagens de programação podem se conectar à página.</p>

<p>Uma página da Web é um documento. Este documento pode ser exibido na janela do navegador ou como a fonte HTML. Mas é o mesmo documento nos dois casos. O DOM (Document Object Model) representa o mesmo documento para que possa ser manipulado. O DOM é uma representação orientada a objetos da página da web, que pode ser modificada com uma linguagem de script como JavaScript.</p>

<p>Os padrões <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> e <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> são implementados na maioria dos navegadores modernos. Muitos navegadores estendem o padrão; portanto, é necessário ter cuidado ao usá-los na Web, onde os documentos podem ser acessados por vários navegadores com diferentes DOMs.</p>

<p>Por exemplo, o DOM padrão especifica que o método <code>getElementsByTagName</code> no código abaixo deve retornar uma lista de todos os elementos <code>&lt;p&gt;</code> no documento:</p>

<pre class="brush: js notranslate">var paragraphs = document.getElementsByTagName("p");
// paragraphs[0] is the first &lt;p&gt; element
// paragraphs[1] is the second &lt;p&gt; element, etc.
alert(paragraphs[0].nodeName);
</pre>

<p>Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas da Web são organizados em objetos (por exemplo, o objeto de <code>document</code> que representa o próprio documento, o objeto de <code>table</code> que implementa a Interface especial DOM {{domxref ("HTMLTableElement")}}}}  para acessar tabelas HTML e assim por diante). Esta documentação fornece uma referência objeto a objeto ao DOM.</p>

<p>O DOM moderno é construído usando várias APIs que trabalham juntas. O <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> principal define os objetos que descrevem fundamentalmente um documento e os objetos dentro dele. Isso é expandido conforme necessário por outras APIs que adicionam novos recursos e capacidades ao DOM. Por exemplo, a <a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> adiciona suporte para representar documentos HTML no DOM principal.</p>

<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM e JavaScript</h2>

<p>O pequeno exemplo acima, como quase todos os exemplos nesta referência, é {{glossary ("JavaScript")}}. Ou seja, está escrito em JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ela, a linguagem JavaScript não teria nenhum modelo ou noção de páginas da web, documentos HTML, documentos XML e suas partes componentes (por exemplo, elementos). Cada elemento de um documento - o documento como um todo, o cabeçalho, as tabelas do documento, os cabeçalhos da tabela, o texto nas células da tabela - faz parte do modelo de objeto do documento desse documento, para que todos possam ser acessados e manipulados usando o método DOM e uma linguagem de script como JavaScript.</p>

<p>No início, o JavaScript e o DOM estavam fortemente interligados, mas, eventualmente, evoluíram para entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, para que possamos escrever esta equação aproximada:</p>

<p>API (página HTML ou XML) = DOM + JS (linguagem de script)</p>

<p>O DOM foi projetado para ser independente de qualquer linguagem de programação específica, disponibilizando a representação estrutural do documento a partir de uma única API consistente. Embora nos concentremos exclusivamente no JavaScript nesta documentação de referência, as implementações do DOM podem ser construídas para qualquer idioma, como este exemplo em Python demonstra:</p>

<pre class="brush: python notranslate"># exemplo de DOM com Python
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # propriedade do objeto de documento DOM
p_list = doc.getElementsByTagName("para")
</pre>

<p>Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p>

<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Acessando o DOM</h2>

<p>Você não precisa fazer nada de especial para começar a usar o DOM. Navegadores diferentes têm implementações diferentes do DOM, e essas implementações exibem graus variados de conformidade com o padrão DOM real (um assunto que tentamos evitar nesta documentação), mas todo navegador usa um modelo de objeto de documento para tornar as páginas da web acessíveis via JavaScript.</p>

<p>Quando você cria um script - seja embutido em um elemento(tag) <code>&lt;script&gt;</code> ou incluído na página da web por meio de uma instrução de carregamento de script - você pode começar imediatamente a usar a API para o {{domxref ("document")}} ou { {domxref ("Window", "window")}} elementos para manipular o próprio documento ou obter os filhos desse documento, que são os vários elementos na página da web. Sua programação DOM pode ser algo tão simples quanto o exemplo seguinte, que exibe uma mensagem de alerta usando a função {{domxref ("window.alert", "alert()")}} da função {{domxref ("Window", " window ")}} ou pode usar métodos DOM mais sofisticados para criar realmente novo conteúdo, como no extenso exemplo abaixo.</p>

<p>O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):</p>

<pre class="brush: html notranslate">&lt;body onload="window.alert('Welcome to my home page!');"&gt;
</pre>

<p>Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o <code>H1</code> à árvore deste documento:</p>

<pre class="brush: html notranslate">&lt;html&gt;
  &lt;head&gt;
    &lt;script&gt;
       // run this function when the document is loaded
       window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Important_Data_Types" name="Important_Data_Types">Tipos de dados fundamentais</h2>

<p>Esta referência tenta descrever os vários objetos e tipos em termos simples. Mas há vários tipos de dados diferentes sendo transmitidos pela API que você deve conhecer.</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> Como a grande maioria do código que usa o DOM gira em torno da manipulação de documentos HTML, é comum sempre se referir aos nós no DOM como <strong>elementos</strong>, pois em um documento HTML, cada nó é um elemento. Apesar de não ser estritamente precisa, a documentação que você encontrará no MDN frequentemente fará a mesma coisa, por causa de quão comum é essa suposição.</p>
</div>

<p>A tabela a seguir descreve brevemente esses tipos de dados.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th>Tipos de dados (Interface)</th>
   <th>Descrição</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{domxref("Document")}}</td>
   <td>Quando um membro retorna um objeto do tipo <code>document</code> (por exemplo, a propriedade <strong><code>ownerDocument </code></strong>de um elemento retorna o <code>document</code> ao qual ele pertence),esse objeto é o próprio objeto de  <code>document</code> raiz. O capítulo <a href="/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> descreve o objeto do <code>document</code> .</td>
  </tr>
  <tr>
   <td>{{domxref("Node")}}</td>
   <td>Todo objeto localizado em um documento é um nó de algum tipo. Em um documento HTML, um objeto pode ser um nó de elemento, mas também um nó de texto ou atributo.</td>
  </tr>
  <tr>
   <td>{{domxref("Element")}}</td>
   <td>
    <p>O tipo do <code>element</code> é baseado em <code>node</code>. Isso se refere a um elemento ou um nó do tipo <code>element</code> retornado por um membro do DOM API. Ao invés de dizer, por exemplo, que o método {{domxref("document.createElement()")}}  retorna um objeto de referência para um nó, nós apenas dizemos que esse método retorna o <code>element</code> que acabou de ser criado no DOM. Os objetos do <code>element</code>  implementam a interface DOM <code>Element</code> e também a mais básica interface <code>Node</code>, sendo ambas incluídas juntas nessa referência. Em um documento HTML, elementos são ainda mais aprimorados pelas APIs HTML DOM. A interface {{domxref("HTMLElement")}} bem como outras interfaces descrevem capacidades de tipos especifícos de elementos (por exemlo, {{domxref("HTMLTableElement")}} para elementos {{HTMLElement("table")}}).</p>
   </td>
  </tr>
  <tr>
   <td>{{domxref("NodeList")}}</td>
   <td>Uma <code>nodeList</code> é um array de elementos comos os que são retornados pelo método {{domxref("document.getElementsByTagName()")}}. Itens numa <code>nodeList</code> são acessados por índices em uma das duas formas:
    <ul>
     <li>list.item(1)</li>
     <li>list[1]</li>
    </ul>
    Esses dois são equivalentes. No primeiro, <strong><code>item()</code></strong> é o método único no objeto da <code>nodeList</code>. O último  usa uma sintaxe típica de array para buscar o segundo item na lista.</td>
  </tr>
  <tr>
   <td>{{domxref("Attribute")}}</td>
   <td>Quando um <code>attribute</code> é retornado por um membro (por exemplo, pelo método <strong><code>createAttribute()</code></strong>), é um objeto de referência que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM bem como elementos, mesmo que raramente você possa usá-los como tal.</td>
  </tr>
  <tr>
   <td>{{domxref("NamedNodeMap")}}</td>
   <td>
    <p> é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. Um namedNodeMap possui um método item () para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.</p>

    <p>Um <code>namedNodeMap</code> é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. O <code>namedNodeMap</code> possui um método <code>item()</code> para esse propósito, e você também pode adicionar e remover itens de um <code>namedNodeMap</code>.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó {{domxref("Attribute")}} simplesmente como um <code><strong>attribute</strong></code>, por exemplo, e referir-se a um array de nós DOM como um <code><strong>nodeList</strong></code>. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.</p>

<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2>

<p>Esse guia é sobre os objetos e o que você pode usar ao manipular a hierarquia do DOM. Há muitos aspectos que tornam entender como eles funcionam confuso. Por exemplo, o objeto representando o elemento HTML <code>form</code> pega a propriedade <strong><code>name</code></strong> da interface do <code>HTMLFormElement</code> mas a sua propriedade <strong><code>className</code></strong> vem da interface <code>HTMLElement</code>. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.</p>

<p>Mas o relacionamento entre objetos e interfaces que são implementadas no DOM pode ser confuso, então essa seção busca mostrar um pouco sobre as interfaces na especificação do DOM e como elas são disponibilizadas.</p>

<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces e Objetos</h3>

<p>Muitos objetos pegam emprestados de várias interfaces diferentes. O objeto table por exemplo implementa uma interface especializada {{domxref("HTMLTableElement")}}, que inclui métodos como <code>createCaption</code> e <code>insertRow</code>. Mas como é também um elemento HTML, <code>table </code>implementa a interface <code>Element </code>descrita no capítulo DOM {{domxref("Element")}} Reference. E finalmente, já que um elemento HTML é também, no que diz respeito ao DOM, um nó na árvore de nós que fazem o modelo de objeto para uma página HTML ou XML, o objeto table também implementa a interface <code>Node</code> mais básica, de onde deriva <code>Element</code>.</p>

<p>Quando você pegar a referência para um objeto <code>table</code>, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.</p>

<pre class="brush: js notranslate">var tabela = document.getElementById("table");
var atributosTabela = tabela.attributes; // interface Node/Element
for (var i = 0; i &lt; atributosTabela.length; i++) {
  // interface HTMLTableElement: atributo border
  if (atributosTabela[i].nodeName.toLowerCase() == "border")
    tabela.border = "1";
}
// interface HTMLTableElement: atributo summary
table.summary = "nota: aumento de borda";
</pre>

<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Interfaces Core no DOM</h3>

<p>Essa seção lista algumas das interfaces mais utilizadas no DOM. A ideia não é descrever o que essas APIs fazem aqui mas para te dar uma ideia de que tipos de métodos e propriedades você verá bastante conforme for usando o DOM. Essas APIs são usadas nos exemplos mais extensos no capítulo de <a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples </a>ao fim desse livro.</p>

<p>Objetos <code>Document</code> e <code>window</code> são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto <code>window</code> representa algo como o browser, e o objeto <code>document</code> é a raiz de todo o documento em si. <code>Element</code> herda dessa interface <code>Node</code> genérica, e juntamente com essas duas interfaces fornecem muitos dos métodos e propriedades que você utiliza em elementos individuais. Esses elementos podem também ter interfaces específicas para lidar com o tipo de dado que esses elementos contêm, como no exemplo do objeto <code>table</code> na seção anterior.</p>

<p>A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.</p>

<ul>
 <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li>
 <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li>
 <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li>
 <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li>
 <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li>
 <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li>
 <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li>
 <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li>
 <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li>
 <li><code>{{domxref("window.content", "", "", "1")}}</code></li>
 <li><code>{{domxref("window.onload", "", "", "1")}}</code></li>
 <li><code>{{domxref("console.log", "", "", "1")}}()</code></li>
 <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li>
</ul>

<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Testando a DOM API</h2>

<p>Esse documento fornece amostras para cada interface que você pode usar ao desenvolver. Em alguns casos, as amostras são páginas completas em HTML, com o acesso ao DOM em um elemento <code>&lt;script&gt;</code>, a interface (ex. botões) necessária para ativar o script num formulário, e os elementos HTML pelo qual o DOM opera listados também. Quando esse é o caso, você pode copiar e colar o exemplo em um novo documento HTML, salvar e rodar o exemplo pelo browser.</p>

<p>Há alguns casos, porém, que os exemplos são mais concisos. Para rodar exemplos que apenas demonstram o relacionamento básico da interface para os elementos HTML, você pode criar uma página teste em que as interfaces podem ser fácilmente acessadas por scripts. A simples página web a seguir fornece um elemento <code>&lt;script&gt;</code> no header em que você pode colocar funções para testar a interface, alguns elementos HTML com atributos que você consegue buscar, definir ou manipular, e a interface web do usuário necessária para chamar essas funções pelo broswer.</p>

<p>Você pode usar essa página teste ou criar uma similar para testar as interfaces DOM que quiser e ver como elas funcionam numa plataforma broswer. Você pode alterar os conteúdos da função <code>test()</code> como achar necessário, criar mais botões ou adicionar elementos se necessário.</p>

<pre class="brush: html notranslate">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Testes DOM&lt;/title&gt;
    &lt;script type="application/javascript"&gt;
    function setBodyAttr(attr, value){
      if (document.body) eval('document.body.'+attr+'="'+value+'"');
      else notSupported();
    }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div style="margin: .5in; height: 400;"&gt;
      &lt;p&gt;&lt;b&gt;&lt;tt&gt;text&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
      &lt;form&gt;
        &lt;select onChange="setBodyAttr('text',
        this.options[this.selectedIndex].value);"&gt;
          &lt;option value="black"&gt;preto
          &lt;option value="darkblue"&gt;azul escuro
        &lt;/select&gt;
        &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
        &lt;select onChange="setBodyAttr('bgColor',
        this.options[this.selectedIndex].value);"&gt;
          &lt;option value="white"&gt;branco
          &lt;option value="lightgrey"&gt;cinza
        &lt;/select&gt;
        &lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/b&gt;&lt;/p&gt;
        &lt;select onChange="setBodyAttr('link',
        this.options[this.selectedIndex].value);"&gt;
          &lt;option value="blue"&gt;azul
          &lt;option value="green"&gt;verde
        &lt;/select&gt;  &lt;small&gt;
        &lt;a href="http://algum.website.tld/pagina.html" id="amostra"&gt;
        (link)&lt;/a&gt;&lt;/small&gt;&lt;br&gt;
      &lt;/form&gt;
      &lt;form&gt;
        &lt;input type="button" value="version" onclick="ver()" /&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Para testar várias interfaces numa única página - por exemplo, um conjunto de propriedades que afete as cores de uma página web - você pode criar uma página de teste similar com um console inteiro de botões, textfields e outros elementos HTML. A screenshot a seguir te dá uma ideia de como interfaces podem ser agrupadas para testes.</p>

<figure>
<figcaption>Figura 0.1 Página de Teste DOM</figcaption>
<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure>

<p>Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (<code>bgColor</code>), a cor dos hiperlinks (<code>aLink</code>), e a cor do texto (<code>text</code>). Porém, ao desenhar suas páginas de teste, testar as interfaces conforme for lendo sobre elas é uma parte importante para aprender a usar o DOM de forma efetiva.</p>

<h2 id="Subnav">Subnav</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li>
 <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li>
</ul>

<div>{{DefaultAPISidebar("DOM")}}</div>