JavaScript
Caminhando pelo DOM - Parte IV
Publicado em: 20/06/2007 |
JavaScript |
Visualizações: 4.535 |
3 Comentário(s)
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 :
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:
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.
- 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 :
<html>
<head>
<title>Criando Elementos DOM</title>
<script>
function criar()
{
var linha = document.createElement("TR"); //cria um elemento <tr>
var cel = document.createElement("TD"); //cria um elemento <td>
var cel2 = document.createElement("TD"); //cria outro elemento <td>
var txt = document.createTextNode("Coluna 1"); //cria um elemento texto
var txt2 = document.createTextNode("Coluna 2"); //cria um elemento texto>
/*
o elemento linha será pai dos elementos cel e cel2
cel será pai do elemento txt e cel2 pai do elemento txt2
*/
cel.appendChild(txt);
cel2.appendChild(txt2);
linha.appendChild(cel);
linha.appendChild(cel2);
/*
o elemnto linha vai ser um no filho da tabela
*/
var tabela = document.getElementById("container");
/*
agora nós temos uma referência para a tabela
*/
tabela.appendChild(linha);
/*
quando anexamos um elemento como um filho de outro elemento
seus filho passam a ser netos deste outro elemento
*/
}
</script>
</head>
<body>
<table border="1" id="container">
</table>
<br />
<input type="button" onclick="criar();" value="CRIAR">
</body>
</html>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:
<html>
<head>
<title>Craindo Atributos Para novos Elementos</title>
<script language="javascript">
function criar()
{
var el = window.prompt("Qual elemento você deseja criar?","");
el = el.toLowerCase();
if(el == "select")
{
var formEl = document.createElement("SELECT");
var num = window.prompt("Quants opções você quer ?","");
for(i=0;i<num;i++)
{
var opt = document.createElement("OPTION");
var valor = window.prompt("Qual o valor da opção ?","");
opt.setAttribute("value",valor);
var txt = document.createTextNode(valor);
opt.appendChild(txt);
formEl.appendChild(opt);
}
}
else
{
var formEl = document.createElement("INPUT");
formEl.setAttribute("type",el); //determina o atributo type do elemento
}
if(el == "button" || el == "submit" || el == "reset" )
{
var valor = window.prompt("Qual o valor do elemento?","");
formEl.setAttribute("value",valor);
}
if(el == "text" || el == "password")
{
var tam = window.prompt("Qual o tamanho do elemento?","");
formEl.setAttribute("size",tam);
var maximo = window.prompt("Qual o nº max de caracteres do elemento?","");
formEl.setAttribute("maxlength",maximo);
}
if(el == "radio" || el == "checkbox")
{
var desc = window.prompt("Qual a descrição do elemento?","");
var txt = document.createTextNode(desc);
var formulario = document.getElementById("form1");
var quebra = document.createElement("BR");
formulario.appendChild(formEl);
formulario.appendChild(txt);
formulario.appendChild(quebra);
}
else
{
var formulario = document.getElementById("form1");
var quebra = document.createElement("BR");
formulario.appendChild(formEl);
formulario.appendChild(quebra);
}
}
</script>
</head>
<body>
<form id="form1">
</form>
<br />
<input type="button" value="CRIAR" onClick="criar();" />
</body>
</html>
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.
Ramon Ferreira Silva
Estudante de Sistemas de Informação, estudou no CEFET/RJ e hoje trabalha com ASP, ASP.NET, PHP e AJA.
» Site do colunista
Todas as matérias de Ramon Ferreira Silva
- Compartilhando o acesso à internet 3G
A rede 3G de acesso à internet é uma grande realidade hoje, em funcionamento em . - Os 10 piores bugs da história
Os 10 piores bugs da história, acompanhe abaixo esses bugs e caso você conheça u. - Indicadores da Qualidade
Os indicadores da qualidade, são na realidade uma das ferramentas mais utilizada. - Internet, intranet e extranet o que são, e quais as diferenças?
Este artigo demonstra o que é cada um destes acessos. Como funcionam, e para que. - Photoshop - Criando gif animado
Vídeo aula de photoshop, ensina a criar um gif animado com a utilização da guia .
- Sistema de Login com Jquery
Aprenda a fazer um sistema de login php/mysql e javascript. - Limitar texto em um textarea
Este artigo mostra ensina como vocês podem bloquear o número de caracteres em um. - Reflexo em imagem com javascript
Vou demonstrar hoje um efeito muito útil para todos os desenvolvedores. Este efe. - Criando Rollovers com JavaScript
ROLLOVER é um efeito de troca de imagens ao passar com o mouse sobre a imagem. - Mascará para campo hora
Hoje vou mostrar como se faz uma mascará no campo de hora em javascript. Muito u.
Lwirkk
Publicado em: 27/02/2008 - 03:23
Excelente tutoriais sobre DOM! Muito bom mesmo, parabéns!
John Marques
Publicado em: 29/05/2008 - 19:18
Não conseguir fazer a exclusão do elemento dom no meu código com essa linha sua..
Ramon
Publicado em: 29/05/2008 - 20:47
Você poderia postar o código de erro ou o seu código javascript que está dando erro para que possamos avaliar onde está dando erado. Deve ser erro de referencia nula.