Coisas De Web

Nome:
Local: Rio de Janeiro, RJ, Brazil

Que perguntinha hein?! Mas vamos lá, adoro estudar assuntos relacionados à web, sempre que posso aprendo uma tecnologia, técnica ou linguagem nova. Tento sempre ver quais são as tendências e acompanha-las, enfim eu sou um eterno aprendiz. Deixando o lado profissional, entrando no lado pessoal, sou uma pessoa super gente-boa (pelo menos eu me acho. rs), adoro curtir a night, sair com os amigos, fazer novas amizades e viajar (tem coisa melhor do que isso?) Acho que você já está sabendo demais sobre mim. Fuiii...

domingo, 30 de dezembro de 2007

InsertBefore e appendChild

Último post do ano! :)
Como prometido iremos falar sobre appendChild e insertBefore. Bom, já sabemos que appendChild e insertBefore, não é inclusão do elemento na estrutura html e sim a re-alocação. Os dois possuem apenas essa função, porém funcionam de forma diferentes.

insertBefore

Aloca um elemento no nó pai, anteriormente do elemento selecionado.

Sintaxe:
elemento.insertBefore(elemento_a_ser_alocado, elemento_guia);

Ex:
document.getElementById("meuElemento").insertBefore(document.createElement("DIV"), document.getElementById("elementGuia"));

No exemplo acima, o elemento DIV irá ser adicionado antes do elementoGuia.

Obs.:
Para essa alocação funcionar o elementoGuia, tem que ser filho (direto) do elemento (meuElemento), ou seja, não pode ter nenhum elemento entre elementoGuia e meuElemento.


appendChild

Aloca um elemento no último filho do elemento selecionado.

Sintaxe:
elemento.appendChild(elemento_a_ser_alocado);

Ex:
document.getElementById("meuElemento").appendChild(document.createElement("DIV"));

No exemplo acima adicionei a DIV após o último filho do elemento meuElemento, sendo assim, a DIV passa a ser o último filho do elemento meuElemento.

Considero esses conceitos de vitais importância para quem está iniciando o estudo de DHTML, ísso é só o início, com outros conceitos, você verá que é possível ser feito muito mais coisas interessantes com essas propriedades que falei hoje.

Então é isso, Um próspero ano novo à todos.

Fuiii...

Marcadores: , ,

quinta-feira, 20 de dezembro de 2007

Criando e deslocando elementos DOM

Depois de muito tempo, estou de volta!
Hoje vou falar de uma dica, que muitos irão achar idiota, outros não. Esses lances de DOM, são muito massa né?! Só que eu sou meio burrinho (rs). Enfim, é algo bem simples, porém nunca tinha me dado conta o quão simples era. Em DOM têm-se o comando:


meuElem = document.createElement("elemento");


O comando acima, cria um elemento html, porém em todos os exemplos que vi na internet até hoje, esse comando era seguido disso:


document.getElementById("meuElemento").appendChild(meuElem);


OU

document.getElementById("meuElemento").insertBefore(meuElem, document.getElementById("meuElemento").lastChild);


Sempre interpretei que os códigos acimas, "cria-se" um elemento dentro do elemento com id de meuElemento, não tinha dúvidas quanto à esse conceito. Porém, ledo engano meu caro, o elemento já tinha sido criado, portanto nesses dois códigos acima, só foram feitos os "deslocamentos" dos elementos. Pensando dessa forma, um monte de coisas que tinha grande dificuldade de fazer, pois se tornavam extensos, podem ser feitos bem rápidos, segue um exemplo muito bom:

Você tem uma aplicação que em um determinado momento, dependendo da iteração com o usuário, o mesmo pega um elemento que é filho de um "pai" e muda de lugar, acarretando na mudança de pai. O que eu um méris mortal fazia?

Sempre soube que a propriedade parentNode, era apenas de leitura. =/
Se eu não posso mudar o "pai", só me resta criar um outro elemento com o pai desejado, mas que tenham os mesmos atributos, com isso acarretava de eu usar, um cloneChild com o "pai" diferente e depois fazer um removeChild.

Viu o trabalhão? Duplico o elemento que eu quero, jogo no pai desejado e excluo o elemento que pertence ao pai que não desejo mais.

Mas com o conceito que falei anteriormente, Seus problemas acabaram. (com muito mais échio) [Concordo contigo, estou no fundo do poço, citar Casseta & Planeta, ninguém merece]

Não preciso de mais nada disso, posso resolver o meu problema direto com o appendChild ou insertBefore, como eles não são os responsáveis pela criação do elemento e sim, apenas, pelo "deslocamento", ou seja, desloco o meu elemento para o pai desejado e pronto.


document.getElementById("newFather").appendChild(document.getElementById("child"));


Viu? Ficou muito mais simples.

"Coisas simples devem parecer simples, coisas complexas devem parecer possíveis."

Obs1: Eu não entrei em maiores detalhes sobre a diferença entre o insertBefore e appendChild, pois esse não era o foco principal desse post, mas em um próximo post, explico com maiores detalhes essas duas propriedades importantíssimas.

Desejo à todos um ótimo natal e semana que vem estou de volta! (pelo menos, assim espero)

Fuiii...

Marcadores: , , ,