KoilyCoordenador 
Idade : 29
Posts : 4744
Créditos : 250
Respeito : 36
Foco, força e fé.
Warning :
Caminhando pelo DOM - Parte IV
Qui 13 Dez 2012, 12:48
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 último 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 documento 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 exemplos em AJAX, até a próxima.
Fonte: Oficina da Net
- 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 :
- Código:
<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>
<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:
- Código:
<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>
<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 último 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 documento 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 exemplos em AJAX, até a próxima.
Fonte: Oficina da Net
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|