Caminhando pelo DOM - Parte IV

Chegamos a parte final de nosso caminho, agora nós iremos ver o que é mais imporatnte no DOM, a criação de elementos dinamicammente, assim como sua exclusão também. Com isso isso nós poderemos modelar o documento em tempo de execução, e sem recarregar a página.

Por | @oficinadanet Programação
Como vimos anteriormente, existem dois tipos de elementos DOM, o elemento nó e o elemento texto.E para criar um novo elemento, seja ele texto ou nó, nós usaremos os mesmos passos, porém, métodos diferentes:

- document.createElement([TAG_HTML]);
- document.createTextNode("string");
-   elemntoPai.appendChild(elemntoFilho);

O primeiro método, recebe como parâmetro o nome de uma tag HTML (em maiúscula) e retorna uma referência a um novo elemento recém-criado, e o segundo recebe uma string e também retorna uma referência ao elemento criado, já o terceiro anexa ao elemento pai um elemento filho.
O passos para se criar um elemento são:

Exemplo 01 :



Criando Elementos DOM















Quando criamos um novo elemento, ele não estará anexado a nenhum elemento, por isso precisamos anexá-lo a um pai. O novo elemento elemento criado, também não possui nenhum atributo, por isso precisamos atribuir atributos a ele.

Exemplo 02:


Craindo Atributos Para novos Elementos

















Bom acabamos de ver como criar elementos de um formulário dinamicamente, sendo possível incluir qualquer elemento, agora veremos com excluir um elemento.

- elementoPai.removeChild("filho"); //remove o último elemento filho, retornando uma referência ao elemento removido.
- replaceChild( novoFilho, filhoAntigo);

O primeiro método remove o útilmo elemento filho de um elemento, e o segundo método substitui o elemento filho por outro elemento

Com estes métodos você pode criar ou modificar quaisquer elementos do docuemnto sendo muito útil em AJAX, pois você só precisa se preocupar em carregar o conteúdo, pois o documento pode ser montado do lado do cliente, diminuindo em muito o tráfego de dados entre cliente-servidor.

Bom esta série foi uma preparação para os nossos próximos exmplos em AJAX, até a próxima.

Mais sobre:
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo