Palavras-chave: DOM, childnode, removechild, excluir itens
Quando começamos a trabalhar com telas javascript, especialmente quando o assunto tem a ver com Ajax e coisas parecidas, é praticamente inevitável o desejo de tornar aquelas páginas HTML estáticas em algo mais interativo, tal como uma aplicação Desktop, sem aquele eventual “reload”. Nesses casos nada melhor que a combinação DOM + Javascript.
Uma caso bem típico de páginas dinâmicas é atualizar uma coleção qualquer, removendo os itens existentes e incluindo novos.
... <ul id="Foo"> <li>um</li> <li>dois</li> <li>tres</li> <li>quatro</li> <li>cinco</li> </ul> <button onclick="recarrega()">recarrega</button> ...
O trecho acima é uma lista de itens de variando de “um” até “cinco”. Neste exemplo fazemos uso de uma lista comum (tag UL), mas poderíamos fazer o mesmo com qualquer outro tipo de elemento DOM.
Ao final existe um botão que chama uma função javascript chamada recarrega(). Vamos dar uma olhada nela:
function recarrega() {
var p = document.getElementById('Foo');
var filhos = p.childNodes;
for( i = filhos.length - 1; i >= 0; i-- ) {
if( filhos[i].tagName == 'LI' ) {
p.removeChild( filhos[i] );
}
}
var li = document.createElement('li');
li.innerHTML = 'seis';
p.appendChild(li);
var li = document.createElement('li');
li.innerHTML = 'sete';
p.appendChild(li);
}
A função não tem segredo algum. Após recuperar o elemento “pai” da lista (identificado como Foo), buscamos todos os nós abaixo dele, que no nosso caso são os itens da lista (LI), através do atributo childNodes. Esse atributo é uma lista comum e pode ser acessada como se fosse um array.
Dentro do for tomamos cuidado de excluir apenas os elementos de tagName LI. Observe que os itens são recuperados do último para o primeiro. Naturalmente é neste ponto que geralmente as pessoas se perdem.
Se ao invés de iterar sobre a lista na ordem inversa tivéssemos ido em ordem crescente, ao excluir um elemento em uma dada posição, o elemento seguinte assumiria essa posição. No loop seguinte o contador i teria sido incrementado e buscaria o elemento nessa posição, que agora ocupa a posição do item excluído anteriormente.
Quando isso ocorre ou o script pula um elemento a ser excluído ou tenta excluir um item que não existe na lista gerando uma exceção.
5 comentários
Feed de comentários deste artigo
8 março 2007 às 11:01
Erick Liesner
Bom dia, li o artigo “Construindo listas dinamicamente” achei interessante, me ajudou muito, mas estou com um problema.
Estou construindo uma caixa de texto que quando eu digito ele faz uma busca e mostra uma lista, ja fiz a lista utilizando um “select” mas o IE naum me deixa mudar as bordas dele e fica feio, então fiz uma lista utilizando um “div” com um “UL..li”(lista), mas não consigo recuperar o valor digitado em um click sem colocar uma tag , pos acaso vcs sabem como eu recupero im item de uma lista(ul) com javascript?
8 março 2007 às 17:52
João Del Valle
Uma maneira é colocar um id em todo o elemento que você adicionar. Assim, você pode removê-lo facilmente.
um
dois
var botado = false;
function botar() {
p = document.getElementById(‘lista’);
var li = document.createElement(‘li’);
li.innerHTML = ‘tres’;
li.setAttribute(‘id’, ‘meuId’);
p.appendChild(li);
}
function tirar() {
i = document.getElementById(‘meuId’);
alert(‘Conteudo: ‘+i.innerHTML);
document.getElementById(‘lista’).removeChild(i);
}
8 março 2007 às 17:55
João Del Valle
Grrr. Não posso editar o comentário acima, mas aqui vai o código escapado agora. :)
<ul id=”lista”>
<li>um</li>
<li>dois</li>
</ul>
<input type=”button” value=”botar” onclick=”botar()”/>
<input type=”button” value=”tirar” onclick=”tirar()”/>
<script>
var botado = false;
function botar() {
p = document.getElementById(‘lista’);
var li = document.createElement(‘li’);
li.innerHTML = ‘tres’;
li.setAttribute(‘id’, ‘meuId’);
p.appendChild(li);
}
function tirar() {
i = document.getElementById(‘meuId’);
alert(‘Conteudo: ‘+i.innerHTML);
document.getElementById(‘lista’).removeChild(i);
}
</script>
18 julho 2007 às 15:36
Alex
Olá, ao testar o script, ele carregou “seis” “sete”, acabei não entendendo nada ?
Pode ser mais claro ?
obrigado
23 julho 2007 às 17:34
daniela
Entao, to com uma questãoa ser resolvida, e gostaria de saber se pode me ajudar, imaginemos a lista citada no início acima, agora eu kero poder selecionar uma das opções e muda-las de ordem, considerando q terei dois botoes, um para mudar pra cima e outro pra mudar pra baixo, a ordem da lista.
Como faço isso?