Caminhando pelo DOM
+2
covital
Koily
6 participantes
KoilyCoordenador 
Idade : 29
Posts : 4744
Créditos : 250
Respeito : 36
Foco, força e fé.
Warning :
Caminhando pelo DOM
Qui 13 Dez 2012, 12:31
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.
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Podemos observar :
O elemento HTML é o elmento raiz do documento;
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
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
- 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>
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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
covitalMembro VIP - Idade : 27 Posts : 2107 Créditos : 0 Respeito : 18
God damn asshole
Re: Caminhando pelo DOM
Qui 13 Dez 2012, 13:06
Não tenho paciência pra ver,
eu não entendo muito.
Mas belo tutorial ;)
eu não entendo muito.
Mas belo tutorial ;)
- Koily
Coordenador - Idade : 29 Posts : 4744 Créditos : 250 Respeito : 36
Foco, força e fé.
Warning :
Re: Caminhando pelo DOM
Qui 13 Dez 2012, 13:45
Obrigado! O tutorial foi feito exatamente pra isso, você começar a entender. É meio que um começo.
LMRCMembro - Idade : 27 Posts : 98 Créditos : 0 Respeito : 0
É isso aí...
Warning :
Re: Caminhando pelo DOM
Qua 09 Jan 2013, 21:10
Interessante, não sabia disso. '-'
- Koily
Coordenador - Idade : 29 Posts : 4744 Créditos : 250 Respeito : 36
Foco, força e fé.
Warning :
Re: Caminhando pelo DOM
Qua 09 Jan 2013, 22:30
Pois é cara! Tem muita coisa que nós não sabemos mas são importantes e necessárias! Valeu por ler! :]
JhazMembro Lendário - Idade : 28 Posts : 2753 Créditos : 10000 Respeito : 18
Re: Caminhando pelo DOM
Sex 18 Jan 2013, 12:45
Nossa, sério mesmo nem eu sabia disso! 'o'
EarthSuporte - Idade : 26 Posts : 1519 Créditos : 120 Respeito : 11
= Mission in progress
Re: Caminhando pelo DOM
Sex 18 Jan 2013, 12:55
LOL Jhaz somos dois eu nem imaginava isso
- Jhaz
Membro Lendário - Idade : 28 Posts : 2753 Créditos : 10000 Respeito : 18
Re: Caminhando pelo DOM
Dom 20 Jan 2013, 00:23
É nois Earth,
Koily, estou começando a gostar disso viu!
Se puder poste mais sobre as mesmas!
Koily, estou começando a gostar disso viu!
Se puder poste mais sobre as mesmas!
ZukermanMembro - Idade : 32 Posts : 101 Créditos : 0 Respeito : 0
ProPixel Fórum
Warning :
Re: Caminhando pelo DOM
Sex 26 Jul 2013, 20:43
Ví, muito bom gostei, adorei.
- Conteúdo patrocinado
Re: Caminhando pelo DOM
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|