Manipulando Objetos DOM, por Breno Oliveira

Avaliação:

| Publicado em: 25/04/2007

Manipulando Objetos DOM

Breno Oliveira desenvolve aplicações para Web há 4 anos utilizando diversas tecnologias, como PHP, Java, JavaScript e ActionScript. Também segue as regras de WebStandard. Atualmente atua como programador da empresa FiberInteractive.

Manipulando Objetos DOM

Olá pessoal,

esse é o meu primeiro artigo aqui no PlugMasters então resolvi escrever sobre algo muito util para nós atualmente, com a utilização do AJAX a utilização do JavaScript está cada vez mais freqüente então sempre precisamos criar novos objetos na tela.
Sei que muita gente está falando "Há eu posso utilizar innerHTML". Bom eu responderia sim você pode mas lembrando que esse método é proprietário do Internet Explorer mas que os outros navegadores aceitam, porem se amanhã ou depois outros navegadores deixam de dar suporte a esse método? Ainda lembro que esse método não é aprovado pela W3C.

Criando novos objetos

Bom para criar o nosso novos elementos (X)HTML dentro de nossa página sempre vamos chamar antes o document.
Quando for criar qualquer nova TAG o método W3C DOM a ser chamado é o createElement(). Vamos criar uma TAG p :

document.createElement("p");

Se você excutar esse código provavelmente não aparecerá nada pois só criamos uma TAG. Esse exemplo acima serve para criarmos qualquer outra TAG's input,div,p, etc ...

Bom mas até agora isso não foi tão interessante pois não adicionamos nada dentro da TAG p e nem adicionamos a TAG p em nossa página.

Então para criamos nó de texto nos utilizamos o método createTextNode("Texto") e vamos usar combinado com uma outra função para podemos adicionar esse nó de texto dentro da TAG p que criamos é o método objeto_alvo.appendChild(nó_html);
Então o código ficaria:

var p = document.createElement("p");
var texto = document.createTextNode("www.vipertech.com.br");
p.appendChild( texto );

Criamos uma TAG p e adicionamos um texto dentro dela. Porém ainda não exibe página pois não adicionamos dentro do corpo da página ...
Podemos adicionar direto no body:

document.body.appendChild( p );

E agora sim ele exibiu nosso texto.

Bom vimos as funções mais basicas que quemos mas isso já nos ajuda com algumas mudanças que podemos fazer na nossa página.

Adicionando elementos em um campo select

Sem dúvida adicionar mais elementos em um campo select são dúvidas mais freqüentes dos desenvolvedores. Principalmente quando trabalhamos com AJAX que queremos popular um campo do tipo select com dados vindos de um BD por exemplo.

Bom a maneira de popular um campo select é identica como fizemos no exemplo acima. Vamos criar uma TAG option e um texto e vamos adicionar ele dentro de nosso select, simples né! Mas vamos há um exeplo.

Lembro: que nosso foco aqui é manipular objetos DOM então não irei utilizar requisições AJAX para popular nosso campo, apenas vou criar um array.

   <select name="cidade" id="cidade">
    <option>--</option>
</select>
<script language="javascript">
    textos = ["www.vipertech.com.br","www.plugmasters.com.br","www.uol.com.br"]
    var campo = document.getElementById( "cidade" );
    for (i = 0; i < textos.length; i++){
        var texto = document.createTextNode (textos[i]);
        var option= document.createElement("option");
        option.appendChild( texto );
        campo.appendChild( option );
    }
</script>

Se você executar o código acima você vai ver que ele adicionou os links dentro do nosso campo select.

Bom criei um array com alguns endereços esse array poderia vir de uma requisição AJAX e gerava o array.
Então usamos getElementById para localizar o elemento que queremos adicionar as novas TAG's option e armazemanos esse nó na variavel campo.

Depois disto navegamos no array textos.
Criamos uma TAG option e o respectivo texto dela adicionamos o texto no option e por fim adicionamos o nó option no campo select.

Estarei escrevendo mais artigos sobre o assunto mais a frente.

Por enquanto visitem o blog da ViperTech lá também tem outras dicas sobre DOM.

Abraços e até o próximo artigo!

Links relacionados

Breno Oliveira <breno26@gmail.com>

Olá pessoal deixei no blog da ViperTech um outro exeplo de como podemos fazer o resultado acima utilizando a biblioteca JQuery.
http://www.vipertech.com.br

Gabriel <nopublic@mail.com>

Cara, belo artigo mas diga uma coisa... Qual a vantagem de usar DOM em relação à:

document.getElementById('id', '<tag><tag2>texto</tag2></tag>');

Procurei me informar pelo google mas não vi nenhuma diferença (além de muito mais linhas de código usando DOM). Saberia dar um exemplo da vantagem e porque?

Abraços