Introduction

  • Revision slug: Gecko_DOM_Reference/Introduction
  • Revision title: Introduction
  • Revision id: 171889
  • Created:
  • Creator: Davis.peixoto
  • Is current revision? Não
  • コメント /* Tipos de dados importantes */

Revision Content

{{template.DomRef()}}

Esta seção provê uma breve introdução conceitual ao DOM: o que ele é, como ele provê estruturas para documentos HTML e XML, como você pode acessá-lo, e como esta API apresenta informações de referência e exemplos.

O que é o DOM?

O Document Object Model (DOM) é uma interface de programação para documentos HTML e XML. Ele provê uma representação estruturada do documento e define um meio pelo qual a estrutura pode ser acessada por programas permitindo-os alterar a estrutura do documento, estilo e conteúdo. O DOM provê uma representação do documento como um conjunto estruturado de nós e objetos que têm propriedades e métodos. Essencialmente ele conecta páginas de internet a scripts ou linguagens de programação.

Uma página de internet é um documento. Este documento pode ser exibido numa janela de navegador, ou como código-fonte HTML. Mas é o mesmo documento em ambos os casos. O Document Object Model (DOM) provê uma outra forma de representar, armazenar e manipular o mesmo documento. O DOM é uma representação orientada a objeto completa da página, e pode ser modificada com uma linguagem de script como o JavaScript.

O padrão W3C DOM constitui as bases para a implementação do DOM nos mais modernos navegadores. Muitos navegadores oferecem extensões que vão além do padrão W3C, portanto a cautela deve ser exercida quando do seu uso em páginas onde os documentos podem ser acessados por vários navegadores com diferentes implementações do DOM.

Por exemplo, o DOM W3C especifica que o método getElementsByTagName no código abaixo deve retornar uma lista com todos os elementos <P> contidos no documento:

paragraphs = document.getElementsByTagName("P");
// paragraphs[0] é o primeiro elemento <p>
// paragraphs[1] é o segundo elemento <p>, etc.
alert(paragraphs[0].nodeName);

Todas as propriedades, métodos, e eventos disponíveis para manipular e criar páginas estão organizados em objetos (por exemplo, o objeto document representa o próprio documento, o objeto table implementa a interface DOM HTMLTableElement para acessar tabelas HTML, e assim por diante). Esta documentação dispõe uma referência objeto a objeto para o DOM implementado nos navegadores baseados no Gecko.

DOM e JavaScript

O rápido exemplo acima, parecido com a maioria dos exemplos desta referência, é JavaScript. Ou seja, ele foi escrito em JavaScript, mas ele usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ele, a linguagem JavaScript não teria nenhum modelo ou noção de páginas web, páginas XML e elementos com os quais ela geralmente lida. Todo elemento num documento—o documento como um todo, o cabeçalho, tabelas dentro do documento, cabeçalhos de tabelas, o texto dentro das células— faz parte do document object model para aquele documento, portanto eles podem ser acessados e manipulados fazendo-se uso do DOM e de uma linguagem de scripting como o JavaScript.

No início, JavaScript e o DOM eram fortemente ligados, mas eventualmente evoluíram em entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, portanto nós podemos escrever esta equação aproximada:

API(web ou página XML) = DOM + JS(linguagem de scripting)

O DOM foi desenvolvido para ser independente de qualquer linguagem de programação em particular, tornando a representação estrutural do documento para uma única API consistente. Embora nos concentramos exclusivamente em JavaScript nesta documentação de referência, implementações do DOM por ser construídas para qualquer linguagem, como este exemplo em Python demonstra:

# Exemplo de DOM em Python
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # propriedade do DOM para o objeto document;
p_list = doc.getElementsByTagName("para");

Como eu acesso o DOM?

Você não tem que fazer nada de especial para começar a usar o DOM. Navegadores diferentes tem implementações diferentes do DOM, e estas implementações exibem graus de conformidade variantes em relação ao verdadeiro padrão DOM (um tema que tentamos evitar nesta documentação), mas cada navegador usa algum document object model para tornar as páginas acessíveis para script.

Quando você cria um script–quer seja um elemento in-line <script> or através de uma instrução de carregamento externo–você pode imediatamente começar a fazer uso da API para os elementos document ou window para manipular o próprio documento ou para acessar os filhos do documento, que são os vários elementos na página. Sua programação em DOM pode ser algo simples como o seguinte código, que mostra uma mensagem atráves da função alert() do objeto window, ou pode usar métodos do DOM mais sofisticados para realmente criar novos conteúdos como no exemplo maior mais abaixo.

<body onload="window.alert('welcome to my home page!');">

Aparte do elemento <script> no qual o Javascript é definido, este Javascript define uma função a ser executada quando o documento é carregado (e quando todo o DOM está disponível para uso). Esta função cria um novo elemento H1, adiciona texto ao elemento e então adiciona o H1 à árvore deste documento.

<html>
<head>
<script>
// executa esta função quando o documento está carregado
window.onload = function() {
   // cria um par de elementos numa 
   // página HTML outrora vazia
   heading = document.createElement("h1");
   heading_text = document.createTextNode("Big Head!");
   heading.appendChild(heading_text);
   document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>

Tipos de dados importantes

Esta referência tenta descrever os vários objetos e tipos da maneira mais simples quanto possível. Mas há uma série de diferentes de tipos de dados sendo passados pela API dos quais você deve estar ciente. Por uma questão de simplicidade, exemplos de sintaxe nesta referência da API tipicamente se referem aos nós como elements, a arrays de nós como nodeLists (ou simplesmente elements), e a atributos dos nós como attributes.

A seguinte tabela descreve brevemente estes tipos de dados.

The following table briefly describes these data types.

document Quando um membro retorna um objeto do tipo document (por exemplo, a propriedade ownerDocument de um elemento retorna o document ao qual pertence), este objeto é o próprio objeto document raiz. O capítulo Referência document do DOM descreve o objeto document.
element element se refere a um elemento ou a um nó do tipo element retornado por um membro da API do DOM. Ai invés de dizer, por exemplo, que o método document.createElement() retorna uma referência de objeto para um node, nós apenas dizemos que o método retorna o element que acabou de ser criado no DOM. Objetos element implementam a interface DOM Element e também a interface mais básica Node, ambas que estão incluídas juntas nesta referência.
nodeList Um nodeList é um array de elementos, como o tipo que é retornado pelo método document.getElementsByTagName(). Itens em uma nodeList são acessados pelo índice em qualquer uma das duas formas:
  • list.item(1)
  • list{{mediawiki.external(1)}}

Estas duas formas são equivalentes. Na primeira, item() é um único método do objeto nodeList. A última usa uma típica sintaxe de array para buscar o segundo item na lista.

attribute Quando um attribute é retornado por um membro (por exemplo, pelo método createAttribute()), ele é uma referência de objeto que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM assim como os elementos o são, embora você raramente pode usá-los como tal.
namedNodeMap Um namedNodeMap é como um array, mas os itens são acessados por nome ou índice, embora este último caso é meramente uma conveniência de enumeração, uma vez que estão em nenhuma ordem especial na lista. Um namedNodeMap tem um método item() para este propósito, e você também pode adicionar e remover itens de um namedNodeMap.

DOM Interfaces

This guide is about the objects and the actual things you can use to manipulate the DOM hierarchy. It's often a matter of indifference that the object representing the HTML FORM element gets its name property from the HTMLFormElement interface but its className property from the HTMLElement interface proper. In both cases, the property you want is simply in the form object.

But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.

Interfaces and Objects

Many objects borrow from several different interfaces. The table object, for example, implements a specialized HTML Table Element Interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM element Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic Node interface, from which Element derives.

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i < tableAttrs.length; i++){
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";

Core Interfaces in the DOM

This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the DOM Examples chapter at the end of this book.

Document and window objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the window object represents something like the browser, and the document object is the root of the document itself. Element inherits from the generic Node interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the previous section.

The following is a brief list of common APIs in web and XML page scripting using the DOM.

Testing the DOM API

This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.

There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the test() function as needed, create more buttons, or add elements as necessary.

<html>
<head>
<title>DOM Tests</title>
<script type="application/x-javascript">
function setBodyAttr(attr,value){
  if(document.body) eval('document.body.'+attr+'="'+value+'"');
  else notSupported();
}
</script>
</head> 
<body>
<div style="margin: .5in; height="400""> 
<p><b><tt>text</tt> color</p> 
<form> 
<select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"> 
<option value="black">black 
<option value="darkblue">darkblue 
</select>
 <p><b><tt>bgColor</tt></p>
 <select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"> 
<option value="white">white 
<option value="lightgrey">gray
 </select>
<p><b><tt>link</tt></p> 
<select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);">
<option value="blue">blue
<option value="green">green
</select>  <small>
     <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
(sample link)</a></small><br>
</form>
<form>
  <input type="button" value="version" onclick="ver()" />
</form>
</div>
</body>
</html>

To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.

Image:DOM_Ref_Introduction_to_the_DOM.gif
Figure 0.1 Sample DOM Test Page

In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (bgColor), the color of the hyperlinks (aLink), and color of the text (text). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.

{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Introduction", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Introduction", "ja": "ja/Gecko_DOM_Reference/Introduction", "pl": "pl/Dokumentacja_Gecko_DOM/Wprowadzenie", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/\u5165\u95e8", "es": "es/Referencia_DOM_de_Gecko/Introducci\u00f3n" } ) }}

Revision Source

<p>
{{template.DomRef()}}
</p><p>Esta seção provê uma breve introdução conceitual ao DOM: o que ele é, como ele provê estruturas para documentos <a href="pt/HTML">HTML</a> e <a href="pt/XML">XML</a>, como você pode acessá-lo, e como esta API apresenta informações de referência e exemplos.
</p>
<h3 name="O_que_.C3.A9_o_DOM.3F">O que é o DOM?</h3>
<p>O Document Object Model (DOM) é uma interface de programação para documentos HTML e XML. Ele provê uma representação estruturada do documento e define um meio pelo qual a estrutura pode ser acessada por programas permitindo-os alterar a estrutura do documento, estilo e conteúdo. O DOM provê uma representação do documento como um conjunto estruturado de nós e objetos que têm propriedades e métodos. Essencialmente ele conecta páginas de internet a scripts ou linguagens de programação.
</p><p>Uma página de internet é um documento. Este documento pode ser exibido numa janela de navegador, ou como código-fonte HTML. Mas é o mesmo documento em ambos os casos. O Document Object Model (DOM) provê uma outra forma de representar, armazenar e manipular o mesmo documento. O DOM é uma representação orientada a objeto completa da página, e pode ser modificada com uma linguagem de script como o JavaScript.
</p><p>O padrão <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> constitui as bases para a implementação do DOM nos mais modernos navegadores. Muitos navegadores oferecem extensões que vão além do padrão W3C, portanto a cautela deve ser exercida quando do seu uso em páginas onde os documentos podem ser acessados por vários navegadores com diferentes implementações do DOM.
</p><p>Por exemplo, o DOM W3C especifica que o método <code>getElementsByTagName</code> no código abaixo deve retornar uma lista com todos os elementos <code>&lt;P&gt;</code> contidos no documento:
</p>
<pre>paragraphs = document.getElementsByTagName("P");
// paragraphs[0] é o primeiro elemento &lt;p&gt;
// paragraphs[1] é o segundo elemento &lt;p&gt;, etc.
alert(paragraphs[0].nodeName);
</pre>
<p>Todas as propriedades, métodos, e eventos disponíveis para manipular e criar páginas estão organizados em objetos (por exemplo, o objeto <code>document</code> representa o próprio documento, o objeto <code>table</code> implementa a interface DOM <code>HTMLTableElement</code> para acessar tabelas HTML, e assim por diante). Esta documentação dispõe uma referência objeto a objeto para o DOM implementado nos navegadores baseados no Gecko.
</p>
<h3 name="DOM_e_JavaScript">DOM e JavaScript</h3>
<p>O rápido exemplo acima, parecido com a maioria dos exemplos desta referência, é <a href="pt/JavaScript">JavaScript</a>. Ou seja, ele foi <i>escrito</i> em JavaScript, mas ele <i>usa</i> o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ele, a linguagem JavaScript não teria nenhum modelo ou noção de páginas web, páginas XML e elementos com os quais ela geralmente lida. Todo elemento num documento—o documento como um todo, o cabeçalho, tabelas dentro do documento, cabeçalhos de tabelas, o texto dentro das células— faz parte do document object model para aquele documento, portanto eles podem ser acessados e manipulados fazendo-se uso do DOM e de uma linguagem de scripting como o JavaScript.
</p><p>No início, JavaScript e o DOM eram fortemente ligados, mas eventualmente evoluíram em entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, portanto nós podemos escrever esta equação aproximada:
</p><p>API(web ou página XML) = DOM + JS(linguagem de scripting)
</p><p>O DOM foi desenvolvido para ser independente de qualquer linguagem de programação em particular, tornando a representação estrutural do documento para uma única API consistente. Embora nos concentramos exclusivamente em JavaScript nesta documentação de referência, implementações do DOM por ser construídas para qualquer linguagem, como este exemplo em Python demonstra:
</p>
<pre class="eval"># Exemplo de DOM em Python
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # propriedade do DOM para o objeto document;
p_list = doc.getElementsByTagName("para");
</pre>
<h3 name="Como_eu_acesso_o_DOM.3F">Como eu acesso o DOM?</h3>
<p>Você não tem que fazer nada de especial para começar a usar o DOM. Navegadores diferentes tem implementações diferentes do DOM, e estas implementações exibem graus de conformidade variantes em relação ao verdadeiro padrão DOM (um tema que tentamos evitar nesta documentação), mas cada navegador usa algum document object model para tornar as páginas acessíveis para script.
</p><p>Quando você cria um script–quer seja um elemento in-line <code>&lt;script&gt;</code> or através de uma instrução de carregamento externo–você pode imediatamente começar a fazer uso da API para os elementos <code><a href="pt/DOM/document">document</a></code> ou <code><a href="pt/DOM/window">window</a></code> para manipular o próprio documento ou para acessar os filhos do documento, que são os vários elementos na página. Sua programação em DOM pode ser algo simples como o seguinte código, que mostra uma mensagem atráves da função <code><a href="pt/DOM/window.alert">alert()</a></code> do objeto <code><a href="pt/DOM/window">window</a></code>, ou pode usar métodos do DOM mais sofisticados para realmente criar novos conteúdos como no exemplo maior mais abaixo.
</p>
<pre class="eval">&lt;body onload="window.alert('welcome to my home page!');"&gt;
</pre>
<p>Aparte do elemento <code>&lt;script&gt;</code> no qual o Javascript é definido, este Javascript define uma função a ser executada quando o documento é carregado (e quando todo o DOM está disponível para uso). Esta função cria um novo elemento H1, adiciona texto ao elemento e então adiciona o <code>H1</code> à árvore deste documento.
</p>
<pre class="eval">&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
// executa esta função quando o documento está carregado
window.onload = function() {
   // cria um par de elementos numa 
   // página HTML outrora vazia
   heading = document.createElement("h1");
   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>
<h3 name="Tipos_de_dados_importantes">Tipos de dados importantes</h3>
<p>Esta referência tenta descrever os vários objetos e tipos da maneira mais simples quanto possível. Mas há uma série de diferentes de tipos de dados sendo passados pela API dos quais você deve estar ciente. Por uma questão de simplicidade, exemplos de sintaxe nesta referência da API tipicamente se referem aos nós como <code>element</code>s, a arrays de nós como <code>nodeList</code>s (ou simplesmente <code>element</code>s), e a <code>atributos</code> dos nós como <code>attribute</code>s.
</p><p>A seguinte tabela descreve brevemente estes tipos de dados.
</p><p>The following table briefly describes these data types.
</p>
<table border="1" cellpadding="5" cellspacing="0">
  <tbody><tr>
    <td><code>document</code></td>
    <td>Quando um membro retorna um objeto do tipo <code>document</code> (por exemplo, a propriedade <b>ownerDocument</b> de um elemento retorna o <code>document</code> ao qual pertence), este objeto é o próprio objeto <code>document</code> raiz. O capítulo <a href="pt/Gecko_DOM_Reference/document">Referência <code>document</code> do DOM</a> descreve o objeto <code>document</code>.</td>
  </tr>
  <tr>
    <td><code>element</code></td>
    <td><code>element</code> se refere a um elemento ou a um nó do tipo <code>element</code> retornado por um membro da API do DOM. Ai invés de dizer, por exemplo, que o método <code>document.createElement()</code> retorna uma referência de objeto para um <code>node</code>, nós apenas dizemos que o método retorna o <code>element</code> que acabou de ser criado no DOM.
Objetos <code>element</code> implementam a interface DOM <code>Element</code> e também a interface mais básica <code>Node</code>, ambas que estão incluídas juntas nesta referência.</td>
  </tr>
  <tr>
    <td><code>nodeList</code></td>
    <td>Um <code>nodeList</code> é um array de elementos, como o tipo que é retornado pelo método <code>document.getElementsByTagName()</code>. Itens em uma <code>nodeList</code> são acessados pelo índice em qualquer uma das duas formas: 
<ul><li> list.item(1)
</li><li> list{{mediawiki.external(1)}}
</li></ul>
<p>Estas duas formas são equivalentes. Na primeira, <b>item()</b> é um único método do objeto <code>nodeList</code>. A última usa uma típica sintaxe de array para buscar o segundo item na lista.
</p>
</td>
  </tr>
  <tr>
    <td><code>attribute</code></td>
    <td>Quando um <code>attribute</code> é retornado por um membro (por exemplo, pelo método <b>createAttribute()</b>), ele é uma referência de objeto que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM assim como os elementos o são, embora você raramente pode usá-los como tal.</td>
  </tr>
  <tr>
    <td><code>namedNodeMap</code></td>
    <td>Um <code>namedNodeMap</code> é como um array, mas os itens são acessados por nome ou índice, embora este último caso é meramente uma conveniência de enumeração, uma vez que estão em nenhuma ordem especial na lista. Um <code>namedNodeMap</code> tem um método item() para este propósito, e você também pode adicionar e remover itens de um <code>namedNodeMap</code>.</td>
  </tr>
</tbody></table>
<h3 name="DOM_Interfaces">DOM Interfaces</h3>
<p>This guide is about the objects and the actual <i>things</i> you can use to manipulate the DOM hierarchy. It's often a matter of indifference that the object representing the <code>HTML FORM</code> element gets its <b>name</b> property from the <code>HTMLFormElement</code> interface but its <b>className</b> property from the <code>HTMLElement</code> interface proper. In both cases, the property you want is simply in the form object.
</p><p>But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.
</p>
<h4 name="Interfaces_and_Objects">Interfaces and Objects</h4>
<p>Many objects borrow from several different interfaces. The table object, for example, implements a specialized <a href="pt/DOM/table">HTML Table Element Interface</a>, which includes such methods as <code>createCaption</code> and <code>insertRow</code>. But since it's also an HTML element, <code>table</code> implements the <code>Element</code> interface described in the <a href="pt/Gecko_DOM_Reference/element">DOM <code>element</code> Reference</a> chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic <code>Node</code> interface, from which <code>Element</code> derives.
</p><p>When you get a reference to a <code>table</code> object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.
</p>
<pre>var table = document.getElementById("table");
var tableAttrs = table.attributes; // Node/Element interface
for(var i = 0; i &lt; tableAttrs.length; i++){
  // HTMLTableElement interface: border attribute
  if(tableAttrs[i].nodeName.toLowerCase() == "border")
    table.border = "1"; 
}
// HTMLTableElement interface: summary attribute
table.summary = "note: increased border";
</pre>
<h4 name="Core_Interfaces_in_the_DOM">Core Interfaces in the DOM</h4>
<p>This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the <a href="pt/Gecko_DOM_Reference/Examples">DOM Examples</a> chapter at the end of this book.
</p><p><code>Document</code> and <code>window</code> objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the <code>window</code> object represents something like the browser, and the <code>document</code> object is the root of the document itself. <code>Element</code> inherits from the generic <code>Node</code> interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the <code>table</code> object example in the previous section.
</p><p>The following is a brief list of common APIs in web and XML page scripting using the DOM.
</p>
<ul><li> <code><a href="pt/DOM/document.getElementById">document.getElementById</a>(id)</code>
</li><li> <code>element.<a href="pt/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code>
</li><li> <code><a href="pt/DOM/document.createElement">document.createElement</a>(name)</code>
</li><li> <code>parentNode.<a href="pt/DOM/element.appendChild">appendChild</a>(node)</code>
</li><li> <code>element.<a href="pt/DOM/element.innerHTML">innerHTML</a></code>
</li><li> <code>element.<a href="pt/DOM/element.style">style</a>.left</code>
</li><li> <code>element.<a href="pt/DOM/element.setAttribute">setAttribute</a></code>
</li><li> <code>element.<a href="pt/DOM/element.getAttribute">element.getAttribute</a></code>
</li><li> <code>element.<a href="pt/DOM/element.addEventListener">addEventListener</a></code>
</li><li> <code><a href="pt/DOM/window.content">window.content</a></code>
</li><li> <code><a href="pt/DOM/window.onload">window.onload</a></code>
</li><li> <code><a href="pt/DOM/window.dump">window.dump</a></code>
</li><li> <code><a href="pt/DOM/window.scrollTo">window.scrollTo</a></code>
</li></ul>
<h3 name="Testing_the_DOM_API">Testing the DOM API</h3>
<p>This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a &lt;script&gt; element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.
</p><p>There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a &lt;script&gt; element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.
</p><p>You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the <code>test()</code> function as needed, create more buttons, or add elements as necessary.
</p>
<pre>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;DOM Tests&lt;/title&gt;
&lt;script type="application/x-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; color&lt;/p&gt; 
&lt;form&gt; 
&lt;select onChange="setBodyAttr('text',
    this.options[this.selectedIndex].value);"&gt; 
&lt;option value="black"&gt;black 
&lt;option value="darkblue"&gt;darkblue 
&lt;/select&gt;
 &lt;p&gt;&lt;b&gt;&lt;tt&gt;bgColor&lt;/tt&gt;&lt;/p&gt;
 &lt;select onChange="setBodyAttr('bgColor',
    this.options[this.selectedIndex].value);"&gt; 
&lt;option value="white"&gt;white 
&lt;option value="lightgrey"&gt;gray
 &lt;/select&gt;
&lt;p&gt;&lt;b&gt;&lt;tt&gt;link&lt;/tt&gt;&lt;/p&gt; 
&lt;select onChange="setBodyAttr('link',
     this.options[this.selectedIndex].value);"&gt;
&lt;option value="blue"&gt;blue
&lt;option value="green"&gt;green
&lt;/select&gt;  &lt;small&gt;
     &lt;a href="http://www.brownhen.com/dom_api_top.html" id="sample"&gt;
(sample 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>To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.
</p><p><img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" src="File:pt/Media_Gallery/DOM_Ref_Introduction_to_the_DOM.gif"><br>
Figure 0.1 Sample DOM Test Page
</p><p>In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (<code>bgColor</code>), the color of the hyperlinks (<code>aLink</code>), and color of the text (<code>text</code>). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.
</p>{{ wiki.languages( { "en": "en/Gecko_DOM_Reference/Introduction", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko/Introduction", "ja": "ja/Gecko_DOM_Reference/Introduction", "pl": "pl/Dokumentacja_Gecko_DOM/Wprowadzenie", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/\u5165\u95e8", "es": "es/Referencia_DOM_de_Gecko/Introducci\u00f3n" } ) }}
Revert to this revision