JavaScript
Caminhando pelo DOM - Parte I
Publicado em: 11/06/2007 |
JavaScript |
Visualizações: 4.486 |
1 Comentário(s)
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.
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.
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.
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>
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();" />
<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>
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.
Ramon Ferreira Silva
Estudante de Sistemas de Informação, estudou no CEFET/RJ e hoje trabalha com ASP, ASP.NET, PHP e AJA.
» Site do colunista
Todas as matérias de Ramon Ferreira Silva
- Compartilhando o acesso à internet 3G
A rede 3G de acesso à internet é uma grande realidade hoje, em funcionamento em . - Os 10 piores bugs da história
Os 10 piores bugs da história, acompanhe abaixo esses bugs e caso você conheça u. - Indicadores da Qualidade
Os indicadores da qualidade, são na realidade uma das ferramentas mais utilizada. - Internet, intranet e extranet o que são, e quais as diferenças?
Este artigo demonstra o que é cada um destes acessos. Como funcionam, e para que. - Photoshop - Criando gif animado
Vídeo aula de photoshop, ensina a criar um gif animado com a utilização da guia .
- Sistema de Login com Jquery
Aprenda a fazer um sistema de login php/mysql e javascript. - Limitar texto em um textarea
Este artigo mostra ensina como vocês podem bloquear o número de caracteres em um. - Reflexo em imagem com javascript
Vou demonstrar hoje um efeito muito útil para todos os desenvolvedores. Este efe. - Criando Rollovers com JavaScript
ROLLOVER é um efeito de troca de imagens ao passar com o mouse sobre a imagem. - Mascará para campo hora
Hoje vou mostrar como se faz uma mascará no campo de hora em javascript. Muito u.
Nicolas
Publicado em: 12/06/2007 - 23:00
muito bom Ramom, show de bola sua coluna. Pena que escreveu só agora, hehe, estava alguns dias atrás procurando bem sobre isto... mas valeu muito tinha coisas ali no código que não tinha acertado... abraço