jul 15

Javascript DOM – Parte 4

Desenvolvimento, HTML, Internet, JavaScript Add comments

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á a terceiro método anexa ao elemento pai um elemento filho.

Os passos para se criar um elemento são:

Exemplo 01 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

<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<strong> referência para a tabela</strong>
 
*/
 
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">
 
</table>
 
<br />
 
<input 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 criado, também não possui nenhum atributo, por isso precisamos atribuir atributos a ele.

Exemplo 02:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

<html>
 
<head>
 
<title>Craindo Atributos Para novos Elementos</title>
 
<script>
 
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>
 
</form>
 
<br />
 
<input value="CRIAR" />
 
</body>
 
</html>

Bem, acabamos de ver como criar elementos de um formulário dinamicamente, sendo possível incluir qualquer elemento, agora iremos ver como 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 isto é tudo pessoal.

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes
preload preload preload