path: root/files/pt-pt/orphaned/o_dom_e_o_javascript/index.html

---
title: O DOM e o JavaScript
slug: orphaned/O_DOM_e_o_JavaScript
original_slug: O_DOM_e_o_JavaScript
---
<h3 id="The_Big_Picture" name="The_Big_Picture">Quadro Geral</h3>

<p>Efeitos visuais como movimentação de camadas pela página, mostrar e esconder camadas, menus em popup, etc. são normalmente referenciados como "<a href="/en/DHTML" title="en/DHTML">DHTML</a>", ou "HTML Dinâmico". Algumas pessoas questionam a utilização real dessas tecnologias em páginas web que supostamente deveriam lidar com conteúdo e não apresentação. Mas o fato é que estão aqui, hoje.</p>

<p>Desde que trabalho nesse projeto, e tendo contato com vários webmasters, me impressiona a grande quantidade da comunidade de webdesign que não conhece seus trabalhos DHTML. A maior parte do tempo eles apenas vão até sites de repositório de scripts, e apenas copiam e colam o código em sua própria página web. Infelizmente a maioria desses sites falam sobre "javascript" e "DHTML" e nunca falam sobre "<a href="/en/DOM" title="en/DOM">DOM</a>". É verdade que, mesmo que o DOM seja um conceito antigo, ele faz parte dos "jargões do desenvolvedor web médio" apenas recentemente.</p>

<p>É um grande desafio para um projeto como a Mozilla convencer os donos desses sites de que vale a pena codificar para o DOM W3C , o que as vezes significa muito trabalho, e falta de suporte em browsers antigos. Também é um grande desafio obter os fatos verdadeiros sobre o suporte ao DOM W3C. O Netscape 6 foi muito criticado por webdesigners estúpidos que estavam codificando seu "JavaScript" para o Netscape 4 e Internet Explorer usando document.layers e document.all. Todos os dias tentamos ajudar pessoas em grupos de notícias, emails pessoais, no Bugzilla, a ter seu site o mais compatível possível. Um dos maiores problemas que encontramos é a confusão entre <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>, <a href="/en/DHTML" title="en/DHTML">DHTML</a>, e <a href="/en/DOM" title="en/DOM">DOM</a>. Essa é uma tentativa de esclarecer as coisas, e explicar as relações entre essas fantásticas e úteis tecnologias.</p>

<h3 id="JavaScript.2C_THE_Web_Scripting_Language" name="JavaScript.2C_THE_Web_Scripting_Language">Javascript, A Linguaguem de Script para Web</h3>

<p><a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> é uma "linguagem de objetos de script" desenvolvida inicialmente na Netscape Communications Corp. por Brendan Eich, que é um dos líderes do projeto Mozilla atualmente. O motor JavaScript utilizado pela Mozilla é o <a href="/en/SpiderMonkey" title="en/SpiderMonkey">SpiderMonkey</a>, que está em conformidade com a especificação do ECMA-262 revisão 3. JavaScript também é conhecido como <a href="/en/ECMAScript" title="en/ECMAScript">ECMAScript</a> (mas veja a página do link para uma explicação detalhada).</p>

<p>Ao contrário do popular equívoco, Javascript não é "Java Interpretado". Em resumo, Javascript é uma linguagem de script dinâmica com suporte a construção de objetos baseado em protótipo. A sintaxe básica é intencionalmente similar a Java e C++ para reduzir a quantidade de novos conceitos necessários para aprender a linguagem. A grande coisa sobre JavaScript é que ele é extremamente fácil de aprender se você quer fazer programação básica (como as necessárias para DHTML simples). Sem tipos visíveis de variáveis, strings são simples de utilizar, total neutralidade de plataforma, etc. Para codificadores avançados também funciona como linguagem procedural e orientada a objetos.</p>

<p>Você verá que a maior parte desse parágrafo sobre JavaScript foi retirado da <a class="external" href="http://mozilla.org/js">página de JavaScript da Mozilla</a>. A especificação mais recente do ECMA pode ser encontrada <a class="external" href="http://www.mozilla.org/js/language/">aqui</a>.</p>

<h3 id="The_Document_Object_Model.2C_a_language-neutral_set_of_interfaces" name="The_Document_Object_Model.2C_a_language-neutral_set_of_interfaces">O Modelo de Objeto de Documento, um conjunto de interfaces neutro de linguagem</h3>

<p>Enquanto JavaScript é a linguagem de programação que permitirá a você operar os objetos DOM e manipulá-los através de programação, o DOM proverá a você métodos e propriedades para recuperar, modificar, atualizar e remover partes do documento em que você está trabalhando. Por exemplo, você pode recuperar o valor de um controle de input de texto HTML como uma string utilizando o DOM. Então você pode utilizar o operador JavaScript "+" para concatenar essa string com qualquer outra de modo a fazer uma sentença mais compreensível. Você deveria usar o método DOM "alert()" para mostrar a string em uma caixa de diálogo para o usuário. Veja também exemplos abaixo.</p>

<p>Se uma página Web fosse um pedaço de um móvel importado da Suécia, o DOM seria as ilustrações das partes - as prateleiras, parafusos, chaves Allen e chaves de fenda.  É possível escrever instruções de como colocar as partes juntas e utilizá-las em qualquer número de linguagens, mas você só utilizará aquelas que você compreende. O manual faz com que seja fácil montar o móvel utilizando as instruções escritas (JavaScript) para referenciar ilustrações do s objetos (DOM) que representam objetos atuais (motor de renderização do navegador). (Obrigado ao Jonathan pela analogia!)</p>

<p>O que é essa fama "linguagem-neutra" como DOM? Por que o DOM é uma linguagem neutra se a única linguagem utilizada para acessá-lo é JavaScript? Bem, isso não é completamente correto. Por exemplo, a Mozilla utiliza o DOM internamento tanto em C++ quanto em JavaScript para sua interface de usuário. O editor, por exemplo,utiliza DOM extensivamente de modo a inserir, modificar e remover o HTML que você está vendo quando você constrói a página no modulo Compositor. Outras implementações conhecidas do DOM incluem <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://web.archive.org/web/*/http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a>, e provavelmente outras. Isso é com certeza possível apenas devido a neutralidade de linguagem do DOM.</p>

<h3 id="The_DOM_and_JavaScript_-_What_is_doing_what.3F" name="The_DOM_and_JavaScript_-_What_is_doing_what.3F">O DOM e o JavaScript - O que está fazendo o que?</h3>

<p>Chegamos ao ponto principal desse documento. O que está fazendo o que? Em um script que embuti em minha página web, o que é o DOM e o que é o JavaScript? Vamos olhar um pouco mais de perto para um simples exemplo. Ele irá recuperar todas as tags <span class="nowiki">&lt;a&gt;</span> em uma NodeList que chamamos de "<code>anchorTags</code>". Então para cada tag de âncora (cada elemento da NodeList <code>anchorTags</code>), ele vai mostrar um alert como valor do atributo "href" da tag.</p>

<p>Azul é para JavaScript. Vermelho para DOM.</p>

<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>;
for (var i = 0; i &lt; <span class="highlightred">anchorTags.length</span> ; i++)
{
   <span class="highlightred">alert</span>("Href desse elemento a é : " + <span class="highlightred">anchorTags[i].href</span> + "\n");
}</span>
</pre>

<h4 id="Explanations" name="Explanations">Explicações</h4>

<p>Esse fragmento de código mostra o que é JavaScript puro, e o que é DOM.</p>

<dl>
 <dt><span class="highlightblue">var anchorTags =</span></dt>
 <dd>Isso irá criar a variável JavaScript chamada "<code>anchorTags</code>".</dd>
 <dt><span class="highlightred">document.getElementsByTagName("a")</span></dt>
 <dd>A interface <code>Document</code> é a primeira interface definida no DOM1 Core, e <code>document</code> é um hospedeiro de objeto implementando a interface <code>Document</code>. O documento armazena tudo que está em sua página.<br>
 O DOM1 Core define o método <code>getElementsByTagName()</code> na inteface <code>Document</code>. Ele recupera uma NodeList (uma espécie de array específico do DOM que armazena nós) de todas as tags que coincidem com o parâmetro passado para a função, em ordem de ocorrência no documento fonte. A variável <code>anchorTags</code> agora é um NodeList.</dd>
 <dt><span class="highlightblue">;</span></dt>
 <dd>O básico ponto e vírgula de fim de instrução. Coisa do JavaScript.</dd>
 <dt><span class="highlightblue">for (var i = 0; i &lt;</span></dt>
 <dd>Uma típica repetição "for" de uma linguagem de programação. Isso permite ir através de cada nó contido no NodeList <code>anchorTags</code>. Note a declaração da variável "<code>i</code>". Também JavaScript.</dd>
 <dt><span class="highlightred">anchorTags.length</span></dt>
 <dd>O DOM1 Core define a propriedade <code>length</code> da interface <code>NodeList</code>. Isso retorna um inteiro que é o número de nós contidos no NodeList. Note que arrays JavaScript também possuem uma <a href="/en/JavaScript/Reference/Global_Objects/Array/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array/length">priedade </a><a href="/en/JavaScript/Reference/Global_Objects/Array/length" title="en/Core_JavaScript_1.5_Reference/Global_Objects/Array/length"><code>length</code></a>.</dd>
 <dt><span class="highlightblue">; i++) {</span></dt>
 <dd>Típico incremento de 1 em variável JavaScript.</dd>
 <dt><span class="highlightred">alert(</span></dt>
 <dd><code>alert()</code> é um método DOM que faz surgir uma caixa de diálogo com o parâmetro (string) que você passou para ele. Note que isso é parte do chamado DOM nível 0, ou DOM0. DOM0 é um conjunto de interfaces suportada por alguns browsers, mas que não é parte da especificação DOM.</dd>
 <dt><span class="highlightblue">"Href desse elemento a é: " +</span></dt>
 <dd>Uma string literal e um operador de concatenação de string. JavaScript.</dd>
 <dt><span class="highlightred">anchorTags{{ mediawiki.external('i') }}.href</span></dt>
 <dd>"<code>href</code>" é uma propriedade da interface <code>HTMLAnchorElement</code> definida na especificação HTML DOM1. Ela reotnra o valor do atributo <code>href</code> do elemento âncora, se existir.<br>
 Nós utilizamos <code>anchorTags{{ mediawiki.external('i') }}</code>, a mesma sintaxe que é utilizada em JavaScript para acessar o <code>i</code>-ésimo item de um array. A neutralidade de linguagem "modo DOM" para acessar um item de uma NodeList é utilizar o método <code>item()</code>, definido na interface <code>NodeList</code>: <code>anchorTags.item(1).href</code>. Mas a maioria das implementações JavaScript permite utilizar uma sintaxe mais simples semelhante a de array, e essa é que as pessoas mais utilizam realmente.</dd>
 <dt><span class="highlightblue">+ "\n");</span></dt>
 <dd>Mais concatenação de string. Insere um retorno de linha ao fim da string.</dd>
 <dt><span class="highlightblue">}</span></dt>
 <dd>Fim do laço de repetição "for".</dd>
</dl>

<div class="originaldocinfo">
<p><strong>Original Document Information</strong></p>

<ul>
 <li>Author(s): Fabian Guisset &lt;fguisset at softhome dot net&gt;</li>
 <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li>
</ul>
</div>

<p>{{ languages( { "fr": "fr/Le_DOM_et_JavaScript", "ja": "ja/The_DOM_and_JavaScript", "pl": "pl/DOM_i_JavaScript", "zh-cn": "cn/The_DOM_and_JavaScript", "pt": "pt/O_DOM_e_o_JavaScript" } ) }}</p>