jun 24

Javascript DOM – Parte 1

Desenvolvimento, JavaScript Add comments

O Dom representa a maneira como os navegadores web enxergam o documento HTML. Após carregar o documento o navegador monta

Uma estrutura de árvore na memória e a partir daí podemos manipulá-lo à vontade.

O JavaScript assim como outras linguagens, possui uma série de funções para criar, excluir e alterar os elementos da árvore.

O DOM não serve apenas para documentos HTML, mas serve também para XML e outras linguagens de marcação.

As aplicações baseadas em AJAX inevitavelmente utilizam o DOM para manipulação da resposta e organização dos elementos no documento.

Abaixo temos um exemplo da estrutura que o navegador monta para exibir o documento.

<html>
   <head>
  <title>
    Trabalhando com o DOM      
  </title>
  </head>
 
   <body>
      <p>
         Este paragráfo contém um exemplo de 
         <strong>
            texto em negrito
         </strong>
      </p> 
   </body>
</html>

Podemos observar:

  • O elemento HTML é o elemento raiz do documento;
  • HEAD e BODY são elementos filhos de HTML, e são irmãos entre si;
  • HEAD possui um filho, TITLE;
  • TITLE possui um filho do tipo texto;
  • BODY possui um filho, P;
  • Possui dois filhos, STRONG e um elemento texto;
  • STRONG possui um filho, elemento texto, e um irmão também texto;  

Os elementos podem ser do tipo nó ou do tipo texto. O nós são a Tags HTML, e texto são texto puro.

Vamos agora ver alguns métodos para “caminhar” pelo Documento

  • 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.

 
E para finalizar essa nossa primeira parte, uma exemplo de como caminhar pelo documento recuperando informações sobre

<html>
   <head>
      <title>
         Trabalhando com o 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>
      <p>
         Este paragráfo contém um exemplo de 
         <strong>
            texto em negrito
         </strong>
      </p> 
         <form>
            <fieldset>
               <input type="button" name="next" value="ProximoIrmao" onClick="proximoIrmao();" />
               <input type="button" name="prev" value="IrmaoAnterior" onClick="irmaoAnterior();" />
               <input type="button" name="parent" value="Pai" onClick="obterPai();" />
               <input type="button" name="first" value="PrimeiroFilho" onClick="primeiroFilho();" />
               <input type="button" name="last" value="UltimoFilho" onClick="ultimoFilho();" />
               <input type="button" name="reiniciar" value="Reiniciar" onClick="restart();" />
               <br /><br />
               Value :<input type="text" name="valor" id="valor" value="" size="65" />
               <br />
               Type : <input type="text" name="tipo" id="tipo" value="" />
               <br />
               Name:<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>

Cada elemento sinta-se a vontade para modificar o documento e veja como isso irá alterar a estrutura DOM.

 No próximo  artigo iremos ver como manipular os atributos dos elementos.

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes
preload preload preload