JavaScript DOM Tutorial: Introdu��o � API do DOM

A linguagem JavaScript foi originalmente desenvolvida por Brendan Eich da Netscape com o nome inicial de �Mocha�, modificado posteriormente para LiveScript e depois para JavaScript. A nomenclatura �LiveScript� foi utilizada ainda no lançamento da linguagem, na vers�o beta do navegador Netscape 2.0, mais precisamente em setembro de 1995, obtendo mudança de nome em an�ncio conjunto com a Sun Microsystems, em dezembro do mesmo ano, quando foi implementada no navegador Netscape vers�o 2.0B3.

O que � o DOM?

O Modelo de Documento por Objetos (Document Object Model - DOM) � uma convenç�o multiplataforma e independente de linguagem para representaç�o e interaç�o com objetos em documentos HTML, XHTML e XML. Os n�s de cada documento s�o organizados em uma estrutura de �rvore, chamada de �rvore DOM.

� uma interface que representa como os documentos HTML e XML s�o lidos pelo seu browser. Ap�s o browser ler seu documento HTML, ele cria um objeto que faz uma representaç�o estruturada do seu documento e define meios de como essa estrutura pode ser acessada. N�s podemos acessar e manipular o DOM com JavaScript, � a forma mais f�cil e usada.

A mutaç�o do nome LiveScript para JavaScript se deu na mesma �poca em que o Netscape adicionou suporte a tecnologia Java em seu navegador (Applets). A escolha foi criticada por parecer uma estrat�gia de marketing da Netscape em se aproveitar da popularidade do rec�m-lançado Java.

N�o demorou muito para a linguagem JavaScript ser aceita de forma ampla como linguagem de script cliente-side de p�ginas web. Por isso, a Microsoft lançou um dialeto compat�vel com a linguagem de nome JScript para evitar problemas de trademark. JScript inovou m�todos para aperfeiçoar m�todos do JavaScript relacionados a data que apresentavam problemas. O JavaScript e Jscript s�o t�o similares que os dois termos s�o comumente usados de forma intercambi�vel.

A Netscape anunciou, em novembro de 1996, que tinha havia submetido JavaScript para Ecma internacional como um candidato a um padr�o industrial. O resultado do trabalho posteriormente foi a vers�o padronizada, intitulada ECMAScript.

Desde ent�o, o JavaScript tem se transformado na linguagem de programaç�o mais popular da web. Inicialmente, muitos profissionais denegriram a linguagem, pois a mesma tinha como alvo principal o p�blico leigo. Com o advento do Ajax, JavaScript teve sua popularidade de volta e recebeu mais atenç�o profissional. Com isso, a proliferaç�o de frameworks e bibliotecas, pr�ticas de programaç�o aperfeiçoadas, aumento no uso do JavaScript fora do ambiente comum dos navegadores e uso de plataformas JavaScript server-side se tornou not�ria.

O projeto CommonJS foi fundado em janeiro de 2009, seu objetivo era especificar uma biblioteca padr�o para o desenvolvimento JavaScript fora do navegador.

JavaScript x Java

� pouco prov�vel que algum programador que esteja iniciando seus estudos sobre as linguagens da web n�o tenha se deparado com essa d�vida: o JavaScript tem o mesmo objetivo do que o Java?

No primeiro momento muitos acham que sim, por suas semelhanças no nome e por serem linguagens web. Observe algumas distinç�es que mostram que essas duas linguagens n�o tem nada em comum.

JavaScript

Linguagem de scripting sem necessidade de compilaç�o;
C�digo integrado no HTML;
Interaç�es e efeitos nas p�ginas;
Falta de confidencialidade do c�digo;
Linguagem simples.

Java

Linguagem de programaç�o compilados na JVM;
Independente de plataforma;
Fortemente tipada;
Linguagem mais complexa;
Segurança no c�digo.

Colocando JavaScript em uma p�gina web

A primeira coisa a ser feita � deixar que o navegador web saiba que ser� informado algum tipo de script ao inv�s do HTML, � onde a tag entra. Essa tag � colocada dentro das tags ou de um documento HTML, a mesma pode ser inserida em v�rios scripts dentro da mesma p�gina ou apenas sendo chamada em arquivos externos com a extens�o .js. A opç�o de fazer uma chamada JavaScript para o arquivo � uma boa pr�tica, pois funciona como um reposit�rio contendo todos os scripts guardados em um lugar e o programador pode aproveitar os c�digos em outras p�ginas, sem precisar repetir o c�digo, apenas fazendo a chamada desse arquivo.

Nos exemplos mostrados nesse artigo foram criados arquivos.html e usado o programa Notepad++ para elaboraç�o do c�digo.

Na Listagem 1 mostramos o c�digo simples de mensagem de boas vindas para o usu�rio.


<!DOCTYPE html>
<html>
  <head>
    <title>Script Boas Vindas</title>
    <script type="text/JavaScript">
       alert("Seja Bem vindo! ");
    </script>
  </head>
  <body>
      Corpo do Html
  </body>
</html>

Listagem 1. C�digo de Boas vindas

Interatividade com o usu�rio atrav�s dos eventos

Os eventos s�o mecanismos que se comunicam com as aç�es que o usu�rio executa em um determinado documento HTML, de onde prov�m alguma interatividade. Tamb�m pode ser pensado que os eventos s�o notificaç�es JavaScript que permitem saber quando alguma aç�o aconteceu. O objetivo dos eventos � responder os acontecimentos de uma p�gina web com o c�digo JavaScript. Vejamos a lista dos principais eventos que essa linguagem possui:

onBlur: � ativado quando o usu�rio retira o foco da aplicaç�o de um elemento da p�gina. O foco da aplicaç�o � o lugar onde est� o cursor.
onChange: Muda o estado de um elemento de formul�rio, �s vezes n�o se produz at� que o usu�rio retire o foco da aplicaç�o do elemento.
onClick: Quando clicado no bot�o do mouse sobre um elemento da p�gina, geralmente um bot�o ou um link.
onFocus: Quando um elemento da p�gina ou a janela recebe o foco da aplicaç�o. Contr�rio do evento �onblur�.
onKeydown: Gerado no instante que um usu�rio pressiona uma tecla, independentemente de solt�-la ou n�o. A produç�o acontece no momento do clique.
onKeypress: Resultado de uma tecla clicada por um tempo espec�fico. Antes disso, produz-se um �onekeydown� no momento que se pressiona a tecla.
onKeyup: Produzido quando o usu�rio deixa de apertar uma tecla, ou seja, no momento que libera a tecla.
onLoad: Quando a p�gina e as imagens terminarem de carregar.
onMousedown: Quando o usu�rio clica sobre um elemento da p�gina, produzindo no momento do clique do bot�o, independente de estar solto ou n�o.
onMousemove: Produz-se quando o mouse se move pela p�gina.
onMouseout: Ocorre com a retirada da seta do mouse da �rea ocupada um elemento da p�gina.
onMouseover: Quando a seta do mouse entra na �rea ocupada por um elemento da p�gina.
onMouseup: Resulta do momento que o usu�rio solta o bot�o do mouse, que previamente havia clicado.
onMove: Ocorre com o movimento da janela do navegador ou um frame.
onResize: Quando a janela do navegador � redimensionada, ou o frame, no caso de que a p�gina os tenha.
onReset: Ocorre quando um usu�rio clica no bot�o de reset de um formul�rio.
onSelect: Executa quando um usu�rio realiza uma seleç�o de um elemento de um formul�rio.
onSubmit: Quando o bot�o do tipo �submit� envia algum formul�rio. � executado antes do envio do formul�rio.

Na Listagem 2 � apresentado como trabalhar com alguns eventos citados acima.


<!DOCTYPE html>
<html>
<head>
  <title>Calculadora interactiva</title>
<script language="JavaScript">

  function calculaResultado(form) {
      form.resultados.value = eval(form.entrada.value);
  }

  function expressaoMatematica(form) {
      form.entrada.blur();
      form.entrada.value = prompt("Insira uma express�o matem�tica. 
      Ex: 2 + 2","");
      calculaResultado(form);
  }
  
  function limparCampos(){
      var entradaValor = document.getElementById("entrada").value;
      var resultadoValor = document.getElementById("resultados").value;
              
      //Passa o valor do campo para vazio
      entradaValor = "";
      resultadoValor = "";
              
  }
</script>
</head> 
<body> 
  <h1>Calcula express�o matem�tica</h1>
  <form method="post" onsubmit="limparCampos()">
      Calculadora:<input type="text" id="entrada" name="entrada" value="" 
      onFocus="expressaoMatematica(this.form)">
      <br>Resultado:<input type="text" id="resultados" name="resultados" 
      value="" onFocus="this.blur()">
      <input type="submit" value="LimparCampos">
  </form> 
</body> 
</html>

Listagem 2. Trabalhando com eventos

Na Listagem 3 � mostrado o evento verificando as coordenadas do mouse.


<html>
<head>
<title>Cordenadas do Mouse via JavaScript</title>

<script>
  function coordenadas(evento) {
     var x;
     var y;
     if (window.event){//Forma de se pegar as coordenadas no Internet 
     Explorer ou Google Chrome
         x = window.event.clientX;
         y = window.event.clientY;
     }else{//Forma de se pegar as coordenadas no Firefox ou Google Chrome
         x = evento.clientX;
         y = evento.clientY;
     }

     document.getElementById("coordenadas").innerHTML = "Cordenadas 
     atual do mouse: " + x + ", " + y;
  }
  document.onmousemove = coordenadas;
</script>
</head>
<body>

  <div id="coordenadas"></div>

</body>
</html>

Listagem 3. Verificando coordenadas do mouse

A seguir � realizado um script que faz a interaç�o com o usu�rio atrav�s de imagens, funç�es e textos de apresentaç�o. Portanto, para ser gerada alguma aç�o, os seguintes passos ter�o que ser pensados nesse cen�rio, como:

Saber quando a p�gina termina de carregar.
Saber como exibir a aç�o para que o usu�rio consiga visualiz�-la.

O primeiro item envolve a reposta de um evento, provavelmente um que seja executado ao carregar a p�gina. O segundo item envolve usar um recurso JavaScript predefinido.

Na Listagem 3 realiza-se a chamada de uma funç�o desenvolvida, que faz uma saudaç�o para o usu�rio com o texto que for digitado.

Na Listagem 4 � realizada uma interaç�o com o usu�rio.


<!DOCTYPE html>
<html>
  <head>
    <title>Interagindo com o usu�rio</title>
    <script type="text/JavaScript">
     function olaSmile(){
       var nomeUsuario = prompt("Qual o seu nome?", "Digite aqui");
       if(nomeUsuario){
         alert('Prazer em conhecer voc�, '+nomeUsuario);
         document.getElementById("idImgFeliz").src = "feliz.jpg"
       }
     }
    </script>
  </head>
  <body onload="alert('Ol� usu�rio, clique na imagem para fazer 
  a interaç�o!');">
    <div >
       <img id="idImgFeliz" SRC="infeliz.jpg" alt="infeliz" 
       onClick="olaSmile()" />         
    </div>             
  </body>
</html>

Listagem 4. C�digo de interaç�o com o usu�rio

Criando Funç�es Inteligentes

As funç�es s�o pequenos trechos de c�digos que permitem tornar os mesmos reutiliz�veis e mais eficientes, ou seja, transformam grandes problemas em pequenos. Os objetivos em se ter funç�es em um programa s�o: divis�es de tarefas, organizaç�o do c�digo e soluç�es de problemas. Possuir funç�es nos c�digos � uma forma inteligente de fazer sistemas, pois deixam o script mais simples e organizado. Geralmente se uma funç�o quando for necess�rio fazer chamadas de eventos ou quando submeter uma p�gina.

Veja no c�digo da Listagem 5 um exemplo de manipulaç�o do componente HTML conhecido como �dual list�, mostrando como selecionar um ou mais itens.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Transfere itens - Dual List</title>
</head>

<script>
    var strDes;
    var strRem;

    function onMoveItem(objRemetente, tdRemetente, objDestino, tdDestino){
    
    var totalRem;
    var totalDes;
    var strtemp
    var strValor;
    
    strDes = "<SELECT id='" + objDestino.id + "' style='WIDTH: 130px; height: 
    100px'  name='" + objDestino.id + "' multiple='multiple' onchange='
    setaValor(this.id);'  height='200px'>";
    strRem = "<SELECT id='" + objRemetente.id + "'  style='WIDTH: 130px; 
    height: 100px'  name='" + objRemetente.id + "' multiple='multiple' 
    onchange='setaValor(this.id);'  height='200px'>";
    
    totalRem = objRemetente.length;
    totalDes = objDestino.length;            

    for (i=0; i < totalDes; i++){
      strValor = objDestino.options[i].text;
      strDes += "<option value='" + strValor + "'>" + strValor + "</option>";
    }

    
    for (i=0; i < totalRem; i++){
      strValor = objRemetente.options[i].text;
      if (objRemetente.options[i].selected){                                  
         strDes += "<option value='" + strValor + "'>" + strValor + "</option>"
      }else{
         strRem += "<option value='" + strValor + "'>" + strValor + "</option>"
      }
    }
    
    strDes += "</SELECT>";
    strRem += "</SELECT>";
    
    document.getElementById(tdDestino).innerHTML = strDes;
    document.getElementById(tdRemetente).innerHTML = strRem;
                
    sortSelect(document.getElementById(objRemetente.id), true);
    sortSelect(document.getElementById(objDestino.id), true);
                      
}
</script>

<body>
<table width="100%" border="0" >
  <tr>
    <td width="33%" align="center" > 
               
    </td>
    <td width="34%">
       <table width="100%" border="0">
         <tr>
           <td align="center" id="tdFilhos">
             <SELECT id=cboFilhos  
             name=cboFilhos multiple="multiple">
                <option value="0">RS</option>
                <option value="1">SC</option>
                <option value="2">SP</option>
                <option value="3">RJ</option>
                <option value="4">TO</option>
                <option value="5">AM</option>
                <option value="6">CE</option>
             </SELECT>
           </td>
           <td valign="middle" align="center">
               <input type="button" id="btnMoverDir" name="cboMoverDir" 
               value=">>" onClick="onMoveItem(cboFilhos, 'tdFilhos', 
               cboFilhosSel, 'tdFilhosSel');"/><BR /><br />
               <input type="button" id="btnMoverEsq" name="cboMoverEsq" 
               value="<<" onClick="onMoveItem(cboFilhosSel, 
               'tdFilhosSel', cboFilhos, 'tdFilhos');"/>
           </td>
           <td align="center" id="tdFilhosSel">
               <SELECT id=cboFilhosSel style="WIDTH: 130px; height: 
               100px" name=cboFilhosSel multiple="multiple" height="200px">
               </SELECT>                                                              
           </td>
         </tr>
       </table>
    </td>
    <td width="33%">
     
    </td>
  </tr>
</table>
</body>
</html>

Listagem 5. Selecionando um ou mais itens

Na Listagem 6 vemos outro c�digo que força o usu�rio inserir a informaç�o correta, neste caso o campo e-mail.


<!DOCTYPE html>
<html>
<head>
<script>
    function validaForm()
    {
    var x=document.forms["formValidacao"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      {
                alert("E-mail n�o v�lido, verifique!");
                return false;
      }else{
                alert("Email v�lido = "+x);
                return true;
      }

    }
</script>
</head>

<body>
    <form name="formValidacao" onsubmit="return validaForm();" 
    method="post">
      Email: <input type="text" name="email">
      <input type="submit" value="Validar Informaç�o">
    </form>
</body>
</html>

Listagem 6. Validaç�o do campo email

Na Listagem 7 � brevemente demonstrado como o programador consegue fazer uma pequena validaç�o no formul�rio HTML usando a linguagem JavaScript.


<html>
  <head>
    <title>Script Validaç�o de Campos</title>
    <script type="text/JavaScript">
       function validaCampos(form) {
                   
           //Recupera o id do elemento nome dentro do form
           var nome = document.getElementById("nome").value;
           if (nome == "") {
                       alert("Digite algum texto no campo!");
                       form.nome.focus();
                       return false;
           }
           
           //Recupera o id do elemento idade dentro do form
           var idade = document.getElementById("idade").value;
           if (idade == "" || !validaNumero(idade)) {
                       alert("Digite apenas n�meros!");
                       form.idade.focus();
                       return false;
           }
           
           //Verifica se foi selecionado ou n�o
           if (form.sexo[0].checked==false && 
           form.sexo[1].checked==false) {
                       alert("Selecione o sexo!");
                       return false;
           }          
       }
       
       //Funç�o que valida se o campo � um n�mero
       function validaNumero(numero)
       {
          var ValidaChars = "0123456789";
          var IsNumero=true;
          var Char;

          for (i = 0; i < numero.length && 
          IsNumero == true; i++) 
             { 
             Char = numero.charAt(i); 
             if (ValidaChars.indexOf(Char) == -1) 
                {
                   IsNumero = false;
                }
             }
          return IsNumero;                    
       }
               
    </script>
  </head>
  <body>
    <form name="formCad" onsubmit="return 
    validaCampos(formCad)">
     Digite o nome: 
     <input id="nome" type="text" size="12"/>
     <br />
     Digite a idade:
     <input id="idade" type="text" size="5"/>
     <br />
     Sexo:  <input type="radio" name="sexo" value="0"> 
     Masculino
          <input type="radio" name="sexo" 
          value="1"> Feminino
     <br/><br/>
     <input type="submit" value="Salvar">
    </form>
  </body>
</html>

Listagem 7. Validaç�o de campos

Comportamentos e propriedades dos elementos via DOM

Existe um modelo de objeto gen�rico entre o HTML, XML e o JavaScript que ajuda na construç�o de aplicaç�es ricas para web, � conhecido como DOM (Document Object Model).

Por ser um padr�o da Web (W3C), os scripts gerados t�m compatibilidade nos principais navegadores, gerando um conforto maior para o desenvolvimento.

O DOM � uma API independente de linguagem que facilita a manipulaç�o da estrutura de um documento e seus elementos de p�ginas HTML, XML, XHTML ou p�ginas JavaScript. Ajuda tamb�m na customizaç�o dos elementos de modo completo, possibilitando aos programas e scripts acessarem e atualizarem dinamicamente o conte�do e o estilo de um documento.

Nessa API existem dois m�todos que provavelmente s�o os mais usados na �rea de desenvolvimento listados abaixo:

document.getElementById(id) � Retorna elemento a partir do valor de seu atributo ID. Por boas pr�ticas, todos os elementos html devem possuir a propriedade �id� para serem manipulados pela API. Caso aconteçam tentativas de acessos aos elementos que n�o possuem �id� definidos, sempre ir� retornar o valor nulo (null).
document.getElementByTagName(tag) � Retorna um conjunto de elementos que s�o definidos pela tag do elemento. Esse m�todo retorna um array contendo todos os elementos na p�gina, na ordem na qual aparecem no documento HTML.

Na Listagem 8 � mostrado um exemplo do acesso por tag com o elemento getElementByTagName.


<!DOCTYPE html>
<html>
<head>
<script>
  function getElements()
    {
      //Recupera os elementos que encontram-se no documento
      var x=document.getElementsByTagName("input");
      alert("Resposta = "+x.length);

    }
</script>
</head>
<body>

  <input type="text" size="20"><br>
  <input type="text" size="20"><br>
  <input type="text" size="20"><br><br>
  <input type="button" onclick="getElements()" 
  value="Clique e veja quantos elementos inputs est�o nessa p�gina?">

</body>
</html>

Listagem 8. getElementByName Function

Quando o modelo DOM � representado em um documento HTML, a p�gina pode ser representada como uma hierarquia de elementos na forma de uma �rvore (tree), ou seja, cada folha na �rvore representa um n� (node), que se relaciona diretamente a cada elemento em uma p�gina. Na hora que um n� aparece sob outro n� na �rvore � constru�da uma hierarquia, nesse caso acaba sendo considerado um filho desse n�.

Cada n� em uma �rvore DOM � classificado conforme seu tipo. Os principais tipos de n� basicamente s�o de elemento e texto.

Elemento � Qualquer elemento HTML que corresponde a uma tag no c�digo HTML.
Texto � O conte�do do texto para um elemento, sempre armazenado como um n�-filho sob um elemento.

Na Figura 1 e Listagem 9 � mostrado um exemplo de c�digo com a hierarquia dos elementos html de modo gr�fico.

Figura 1. �rvore DOM dos elementos html


<!DOCTYPE html>
<html>
  <head>
    <title>T�tulo da p�gina</title>
  </head>
  <body>
    <h1>
         Par�grafo 1 da p�gina
    <h1>
    <p>Par�grafo 1 da p�gina <em>pedaço do text node com 
    elemento em</em> volta para o elemento par�grafo</p>
    <p>Par�grafo 2 da p�gina</p>
  </body>
</html>

Listagem 9. Exemplo da estrutura da Figura 1

Na Listagem 10 s�o mostrados quais os atributos do elemento HTML conhecido como �div�. Atrav�s da propriedade �innerHTML� � conseguido o acesso a todo o conte�do armazenado no elemento.


<html>
<head>
<title>Hieraquia do elemento div por JavaScript</title>

<script type="text/JavaScript">

  function listarAtributos(){
    var elem = document.getElementById("conta");
    var atributos = "";
    
    for(var i = 0; i < elem.attributes.length; i++){
      atributos += elem.attributes[i].nodeName + "<br>";
    }
    
    elem.innerHTML = atributos;
  }

</script>
</head>
<body>

  <div id="conta" >
  Aqui � um elemento DIV</div>

  <button onclick="JavaScript:listarAtributos()">
  Listar atributos da DIV</button>

</body>
</html>

Listagem 10. Hierarquia do elemento �div�

A origem das interaç�es com o DOM tem como o objeto �document�, que � um n� superior na �rvore de n�s de um documento. Esse objeto oferece dois m�todos que s�o o getElementById( ) e getElementByTagName( ), ambos j� mostrados em scripts anteriores.

A seguir s�o mostrados os m�todos que podem ser usados para percorrer o documento, bem como:

hasChildNodes - retorna true se o elemento possui filhos;
firstChild - retorna uma refer�ncia ao primeiro elemento filho;
lastChild - retorna uma refer�ncia ao �ltimo elemento filho;
nextSibling - retorna uma refer�ncia ao irm�o posterior ao elemento;
previousSibling - retorna uma refer�ncia ao irm�o anterior ao elemento;
nodeName - retorna o nome da TAG do elemento (apenas para elementos n�);
nodeValue - retorna o valor do elemento (apenas para elementos texto);
nodeType - retorna o tipo do elemento;
parentNode - retorna uma refer�ncia ao elemento pai.

Essas propriedades s�o a chave para ser capaz de manipular a �rvore de documentos para acessar dados espec�ficos do n�.

Veja na Listagem 11 a recuperaç�o das informaç�es sobre cada elemento no documento.


<html>
  <head>
     <title>
        Propriedades da �rvore DOM      
     </title>
     
     <script>
        //nossas vari�veis globais, que ser�o compartilhadas por todas as nossa funç�es 
        var el; 
        var nome;
        var tipo;
        var valor;
        
        function start()
        { 
           el = document.documentElement; //pega o elemento HTML, raiz do documento
           nome = document.getElementById("nome"); //pega o elemento com o id nome
           tipo = document.getElementById("tipo"); //pega o elemento com o id tipo
           valor = document.getElementById("valor"); //pega o elemento com o id valor
           mostra();
         }
        
        function mostra() //exibe as informaç�es
        { 
           nome.value = el.nodeName;
           tipo.value = el.nodeType;
           valor.value = el.nodeValue;
        }
        
        function restart() //retorna para o elemento raiz
       {
           el = document.documentElement;
           mostra();
        }
        
        function primeiroFilho() // vai para o primeiro elemento filho
        {
            if(el.firstChild){
              el = el.firstChild;
             mostra();
            }
            else
               alert("O Elemento n�o possui filhos !");  
        }
        
        function ultimoFilho() // vai para o �ltimo elemento filho
        {
            if(el.lastChild){
              el = el.lastChild;
              mostra();
            }
            else
               alert("O Elemento n�o possui filhos !");  
        }
        
        function obterPai() // volta para o elemento pai
        {
           if(el.parentNode){
              el = el.parentNode;
              mostra();
            }
            else
               alert("O Elemento n�o possui Pai !");  
        }
        
        function proximoIrmao() //vai para o irm�o posterior
        {
            if(el.nextSibling){
              el = el.nextSibling;
              mostra();
            }
            else
               alert("O Elemento n�o possui um pr�ximo irm�o !");  
        }
        
        function irmaoAnterior() //vai para o irm�o anterior
        {
            if(el.previousSibling){
              el = el.previousSibling;
              mostra();
            }
            else
              alert("O Elemento n�o possui um irm�o anterior !");  
        }
        
     </script>
     
  </head>
  
  <body>
  
    <form>
     <fieldset>
      <input type="button" name="next" value="Next Irm�o" onClick="proximoIrmao();" />
      <input type="button" name="prev" value="Prev Irm�o" onClick="irmaoAnterior();" />
      <input type="button" name="parent" value="Pai" onClick="obterPai();" />
      <input type="button" name="first" value="First Filho" onClick="primeiroFilho();" />
      <input type="button" name="last" value="Last Filho" onClick="ultimoFilho();" />
      <input type="button" name="reiniciar" value="Reiniciar" onClick="restart();" />
      
                                     <br/>
      Valor :<input type="text" name="valor" id="valor" value="" size="65" />
      <br/>

      Tipo : <input type="text" name="tipo" id="tipo" value="" />
      <br/>

      Nome do elemento:<input type="text" name="nome" id="nome" /> 
     </fieldset>
    </form>
     
 </body>
</html>
<script language="JavaScript">
  start();// inicia no elemento HTML, mas antes ele espera que todo o documento esteja carregada
</script>

Listagem 11. Propriedades elementos DOM

Com este artigo podemos concluir que o JavaScript � a linguagem para quem deseja desenvolver mais a l�gica e saber como manipular elementos, pois � capaz de se adaptar com outras linguagens Web e frameworks, fechando uma boa parceria.

JavaScript DOM: introdu��o � API

Veja neste artigo a história, características, formação, e os scripts que manipulam elementos HTML, podendo ser feitos com JavaScript, onde é utilizado o modelo DOM como base para seu desenvolvimento.