Caminhando pelo DOM - Parte I

O Document Object Model é a meneira mais eficaz de se criar interfaces ricas para a WEB. Basenado-se nisto vamos iniciar uma caminhada para aprender a a utilizá-lo.

Por | @oficinadanet Programação

O Dom representa a maneira como os navegadores web enxergam o documenrto HTML. Após carregar o documento o navegador monta uma estrutura de árvore na memória e a partir daí podemos manipulá-lo a 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 utilizão o DOM para manipulação das resposta e organização dos elementos no documento. Abaixo temos um exemplo da estrurura 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>

Caminhando pelo DOM - Parte I

 

 

 

 

Podemos observar :

  • O elemento HTML é o elmento 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;
  • 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 tippo 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.
<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();" />
               


               Value :<input type="text" name="valor" id="valor" value="" size="65" />
               

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

               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> 

E para fianlizar essa nossa primeira parte, uma exemplo de como camonhar pelo docuemnto recuperando informações sobre cada elemnto, sinta-se a vontade para modificar o docuemnto e veja como isso irá alterar a estrutura DOM.Na próxima parte iremos ver como manipular os atributos dos elementos.

Mais sobre: javascript
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo