Conheça também: Onmasters . Ofertas . Divulgue! . Vai.la . Geraboleto . Baixa.la . Assista.la . Bloghost
» Início » Programação » Javascript » Entendendo o DOM. -->
 
Avaliação: | Publicado em: 01/11/2007
Entendendo o DOM.
Edson Vagner editor de artigos Plugmasters, especializado em programação javascript


A nova onda das páginas hoje em dia é o tal conceito AJAX. Mas para entender esse conceito é necessário começar pela base. A espinha dorsal do AJAX é um conceito que não está inserido na sua sigla, o famoso DOM (Document Object Model).


O DOM é uma API(Interface de Programação de Aplicativos) que manipula os elementos de uma página HTML e inclusive elementos de uma página XML. Com a utilização do DOM você pode alterar, criar e navegar pela estrutura de sua página.


O modelo DOM é baseado no modelo hierarquia, em formato de uma árvore. Cada elemento ou texto é considerado um “nó”, e através desses nós você pode alterar as estruturas da sua página. O DOM pode ser manipulado por qualquer linguagem script client-side (Javascript, Vbscript e etc...).

 

 

Explicando agora de uma forma prática o código com comentários


<html>
<head>
<title>DOM</title>
<script language="javascript" type="text/javascript">

  //Criamos uma função para adicionar um item a nossa lista
 function addTexto(){
 
  /*
     Criamos uma variável para selecionar a lista através do comando
     document.getElementById */
  var lista_ul = document.getElementById("lista_ul");


/* Criamos uma variável que cria um elemento em nossa pagina HTML, esse elemento será criado dentro da nossa lista */
  var elemento_li = document.createElement("li"); 
 
/*
 O método appendChild acrescenta um elemento a nossa lista <li></li>
 O método createTextNode adiciona texto na nossa lista que o usuário passa pelo prompt

*/
elemento_li.appendChild(document.createTextNode(prompt("Insira um item na lista", "Digita o item da lista")));


//Cria o novo texto na lista
lista_ul.appendChild(elemento_li);
 }
</script>
</head>
<body>
 <!--link que chama a funcao para adicionar item na lista-->
 <a href="#" onClick="addTexto();">Clique aqui para inserir item na lista</a>
 <ul id="lista_ul">
 </ul>
</body>
</html>


Chegamos à conclusão que toda a estrutura do Ajax utiliza a API do DOM, e é indispensável seu conhecimento. Estou disponibilizando alguns links com material para consulta e aprendizado do DOM.



Até então, eu conhecia o AJAX, mas não imaginava que a base de tudo era o DOM...

Gostei desse texto, escrito forma clara e fácil compreensão...


e.. via a WEB 2.0!!!

abraços
naterson ramos <natersonramos@yahoo.com.br>
Texto objetivo e didático é fácil entender.

Parabéns!
fernando Matias <fernandoh2m@gmail.com>
Muito bom!!! Ajudou muito aqui!
Ate que enfim alguem falou facil sobre DOM. Parabens
Tiago Hillebrandt <tiagoscd@yahoo.com.br>
Show cara, só faltou abordar sobre 'setAttribute()', mas o que vale é a intenção! Ficou excelente o artigo

Até mais, abraço!
Luciffer <tml13@ig.com.br>
eaew cara ow tava lendo uns textos pela net e vi um texto seu o tutorial bank mais o caso eh que eu queria saber se vc tinha um grupo antigamente chamado vulneraveis e se jogava tetrinet
se for manda um email pra gente troca umas ideias