Tem que ter o DOM(gerando e parindo)
by renie on jan 27th in Tutoriais Desenvolvimento
Depois de aprender de que se trata DOM, o que é árvore, acessar e alterar elementos e navegar pelos filhos desses elementos, só nós resta aprender a criar e remover elementos.
Para fazer isso utilizaremos um método do objeto document chamado createElement . Esse método é muito simples de ser utilizado, basta que passemos como parâmetro o nome do elemento que desejamos criar, seguindo a seguin sintaxe:
document.createElement(“nomeDoElemento”)
Depois basta adicionar o elemento na página utilizando o método appendChild que pode ser chamado em qualquer elemento já existente no seu html. Um exemplo pra clarear:
<html>
<head>
<script language="javascript" type="text/javascript">
function criarNovoElemento(){
var novaLinha = document.createElement("tr");
var novaCelula1 = document.createElement("td");
var novaCelula2 = document.createElement("td");
novaCelula1.appendChild(document.createTextNode("Linha Criada Via DOM"));
novaCelula2.appendChild(document.createTextNode("Linha Criada Via DOM"));
novaLinha.appendChild(novaCelula1);
novaLinha.appendChild(novaCelula2);
document.getElementById("tabela").getElementsByTagName("tbody")[0].appendChild(novaLinha);
}
</script>
</head>
<body>
<button onclick="criarNovoElemento()">Criar</button>
<table id="tabela" border="1">
<tbody>
<tr>
<td>Linha Original</td>
<td>Linha Original</td>
</tr>
</tbody>
</table>
</body>
</html>
Nesse código eu já tenho uma tabela no html, e cada vez que eu apertar o botão o DOM deve criar pra mim uma nova linha com duas células nessa tabela. Então quando eu entro na função eu crio 3 elementos: uma linha de tabela (tr), e duas células de tabela(td), e armazeno cada uma delas dentro de uma variável. Depois eu crio um nó de texto dentro de cada célula, com uma string qualquer. Em seguida eu coloco essas duas células dentro da linha, e por último, adiciona essa linha que eu criei dentro da tabela. E aí cabe uma observação. Porque eu não fiz a tabela sem o <tbody> e adicionei a linha direto na tabela? Porque se eu fizer assim, nosso amigo MICROSOFT Internet Explorer buga =D . Simples assim. Então o que eu fiz? Peguei a tabela pelo ID, aí puxei o elemento ZERO do array de nós-filhos de ‘tabela’ que tem nome ‘tbody’ e só então adicionei a linha. THANKS IE !! Mas na verdade eu preciso admitir que o IE esteja parcialmente correto, pois diz a w3C que o elemento TABLE deve possuir um <thead>, um<tbody> e um <tfoot>, ou seja, ele está seguindo o padrão recomendado. Mas sei lá, não acho que seja dá conta do IE se eu uso TBODY ou não. Enfim, não vem ao caso.
O fato é que a partir do que já vimos eu posso fazer uma firulinha nesse código e brincar dessa forma:
<html>
<head>
<script language="javascript" type="text/javascript">
var contador = 1;
function criarNovoElemento(){
contador++;
var novaLinha = document.createElement("tr");
var novaCelula1 = document.createElement("td");
var novaCelula2 = document.createElement("td");
novaCelula1.appendChild(document.createTextNode("Linha Criada Via DOM"));
novaCelula2.appendChild(document.createTextNode("Linha Criada Via DOM"));
if(contador%2 == 0){
novaCelula1.className="par";
novaCelula2.className="par";
}
else{
novaCelula1.className="impar";
novaCelula2.className="impar";
}
novaLinha.appendChild(novaCelula1);
novaLinha.appendChild(novaCelula2);
document.getElementById("tabela").getElementsByTagName("tbody")[0].appendChild(novaLinha);
}
</script>
<style type="text/css">
.impar{
background-color:#060;
}
.par{
background-color:#FFF;
}
</style>
</head>
<body>
<button onclick="criarNovoElemento()">Criar</button>
<table id="tabela" border="1">
<tbody>
<tr>
<td>Linha Original</td>
<td>Linha Original</td>
</tr>
</tbody>
</table>
</body>
</html>
Aqui faço a mesma coisa, mas mudo a cor do fundo se a célula foi par ou impar.
Eu ainda poderia usar um outro método chamado setAttribute para colocar qualquer propriedade html que eu quisesse no elemento, assim:
var campoTexto = document.createElement("input");
campoTexto.setAttribute<code>('type', 'text');</code>
campoTexto.setAttribute<code>('id', 'meuCampoDeTexto');</code>
Não fiz o código html inteiro pra deixar de lição pra vocês ( mentira, é preguiça mesmo hahaha ).
E como último milenar ensinamento dessa série de DOM eu apresento pra vocês o removeChild
function removerElemento(){
var filho = document.getElementById("tabela").getElementsByTagName("tbody")[0].lastChild;
var pai = document.getElementById("tabela").getElementsByTagName("tbody")[0];
pai.removeChild(filho);
}
Bem susse de fazer…
E assim acabo minha série sobre DOM, dentro de alguns dias postarei uma lista de funções DOM para vocês testarem. Espero ter sido útil.
Até mais moçada.
