ProPixel

Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 Caminhando pelo DOM em Qui 13 Dez 2012, 12:31

Koily

avatar
Coordenador

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 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 utilizam o DOM para manipulação das resposta e organização dos elementos no documento. Abaixo temos um exemplo da estrutura que o navegador monta para exibir o documento.
Código:
<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>

[Você precisa estar registrado e conectado para ver esta imagem.]

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.


Código:
<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 finalizar essa nossa primeira parte, uma exemplo de como caminhar pelo documento recuperando informações sobre cada elemento, sinta-se a vontade para modificar o documento e veja como isso irá alterar a estrutura DOM. Na próxima parte iremos ver como manipular os atributos dos elementos.

Fonte: Oficina da Net

2 Re: Caminhando pelo DOM em Qui 13 Dez 2012, 13:06

covital

avatar
Membro VIP

Não tenho paciência pra ver,
eu não entendo muito.
Mas belo tutorial Piscada

3 Re: Caminhando pelo DOM em Qui 13 Dez 2012, 13:45

Koily

avatar
Coordenador

Obrigado! O tutorial foi feito exatamente pra isso, você começar a entender. É meio que um começo.

4 Re: Caminhando pelo DOM em Qua 09 Jan 2013, 21:10

LMRC

avatar
Novato

Interessante, não sabia disso. '-'

5 Re: Caminhando pelo DOM em Qua 09 Jan 2013, 22:30

Koily

avatar
Coordenador

Pois é cara! Tem muita coisa que nós não sabemos mas são importantes e necessárias! Valeu por ler! :]

6 Re: Caminhando pelo DOM em Sex 18 Jan 2013, 12:45

Jhaz

avatar
Administrador

Nossa, sério mesmo nem eu sabia disso! 'o'

7 Re: Caminhando pelo DOM em Sex 18 Jan 2013, 12:55

Earth

avatar
Suporte

LOL Jhaz somos dois eu nem imaginava isso

8 Re: Caminhando pelo DOM em Dom 20 Jan 2013, 00:23

Jhaz

avatar
Administrador

É nois Earth,

Koily, estou começando a gostar disso viu!
Se puder poste mais sobre as mesmas!

9 Re: Caminhando pelo DOM em Sex 26 Jul 2013, 20:43

Zukerman

avatar
Membro

Ví, muito bom gostei, adorei.

Conteúdo patrocinado


Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum