DOM（Document Object Model）是表示文档（如HTML文档）和访问、操作说清楚文档的各种元素（如HTML标记和文本串）的应用程序接口（API）。在DOM中，HTML文档中的各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。
下面通过一个添加评论和删除评论功能的例子来体验一个DOM操作文档的用法
实现效果图如下：
步骤：
（1）最顶端的小狗与文字没什么好说，就是弄一个表格。下面说说评论和评论内容这块，在页面中添加一个表格（1X2）用于显示评论的列表。代码如下：
|
1
2
3
4
5
6
|
<
table
width
=
"600"
border
=
"1"
align
=
"center"
cellpadding
=
"0"
cellspacing
=
"0"
bordercolor
=
"#FFFFFF"
bordercolorlight
=
"#666666"
bordercolordark
=
"#FFFFFF"
id
=
"comment"
>
<
tr
>
<
td
width
=
"18%"
height
=
"27"
align
=
"center"
bgcolor
=
"#E5BB93"
>评论人</
td
>
<
td
width
=
"82%"
align
=
"center"
bgcolor
=
"#E5BB93"
>评论内容</
td
>
</
tr
>
</
table
>
|
（2）在评论列表下方就是用于收集评论信息，可以通过一个表单去实现评论的输入信息。还有就是下面几个button.详细代码如下：
|
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
|
<
form
name
=
"form1"
method
=
"post"
action
=
""
>
<
table
width
=
"600"
height
=
"122"
border
=
"0"
align
=
"center"
cellpadding
=
"0"
cellspacing
=
"0"
>
<
tr
>
<
td
width
=
"119"
height
=
"14"
> </
td
>
<
td
width
=
"481"
> </
td
>
</
tr
>
<
tr
>
<
td
height
=
"27"
align
=
"center"
>评 论 人：</
td
>
<
td
>
<
input
name
=
"person"
type
=
"text"
id
=
"person"
size
=
"40"
>
</
td
>
</
tr
>
<
tr
>
<
td
align
=
"center"
>评论内容：</
td
>
<
td
><
textarea
name
=
"content"
cols
=
"60"
rows
=
"6"
id
=
"content"
></
textarea
></
td
>
</
tr
>
<
tr
>
<
td
height
=
"40"
> </
td
>
<
td
><
input
name
=
"Button"
type
=
"button"
class
=
"btn_grey"
value
=
"发表"
>
<
input
name
=
"Reset"
type
=
"reset"
class
=
"btn_grey"
value
=
"重置"
>
<
input
name
=
"Button"
type
=
"button"
class
=
"btn_grey"
value
=
"删除第一条评论"
>
<
input
name
=
"Button"
type
=
"button"
class
=
"btn_grey"
value
=
"删除最后一条评论"
></
td
>
</
tr
>
</
table
>
</
form
>
|
顺便也把定义的css样式也放出来（按需修改）：
|
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
|
/* CSS Document */
<!--
body{
FONT-SIZE:
9pt
;
margin-left
:
0px
;
SCROLLBAR-FACE-COLOR:
#E5BB93
;
SCROLLBAR-HIGHLIGHT-COLOR:
#ffffff
;
SCROLLBAR-SHADOW-COLOR:
#fcfcfc
; COLOR:
#000000
;
SCROLLBAR
-3
DLIGHT-COLOR:
#ececec
;
SCROLLBAR-ARROW-COLOR:
#ffffff
;
SCROLLBAR-TRACK-COLOR:
#ececec
;
SCROLLBAR-DARKSHADOW-COLOR:
#999966
;
BACKGROUND-COLOR:
#fcfcfc
}
a:hover {
font-size
:
9pt
;
color
:
#FF6600
;
}
a {
font-size
:
9pt
;
text-decoration
:
none
;
color
:
#676767
;
noline:expression(this.onfocus=this.blur);
}
td{
font-size
:
9pt
;
color
:
#000000
;
padding
:
5px
;
}
.btn_grey {
font-family
:
"宋体"
;
font-size
:
9pt
;
color
:
#333333
;
background-color
:
#eeeeee
;
cursor
: hand;
padding
:
1px
;
height
:
19px
;
border-top
:
1px
solid
#FFFFFF
;
border-right
:
1px
solid
#666666
;
border-bottom
:
1px
solid
#666666
;
border-left
:
1px
solid
#FFFFFF
;
}
input{
font-family
:
"宋体"
;
font-size
:
9pt
;
color
:
#333333
;
border
:
1px
solid
#999999
;
}
hr{
border-style
:
solid
;
height
:
1px
;
color
:
#CCCCCC
;
}
-->
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=GBK"
>
|
（3）下面就需要编写自定义的JavaScript函数addElement(),用于在评论列表中添加一条评论信息。在该函数中，首先将评论信息添加到评论列表的后面，然后清空评论人和评论内容文本框。具体代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
function
addElement() {
//创建TextNode节点
var
person = document.createTextNode(form1.person.value);
var
content = document.createTextNode(form1.content.value);
//创建td类型的Element节点
var
td_person = document.createElement(
"td"
);
var
td_content = document.createElement(
"td"
);
var
tr = document.createElement(
"tr"
);
//创建一个tr类型的Element节点
var
tbody = document.createElement(
"tbody"
);
//创建一个tbody类型的Element节点
//将TextNode节点加入到td类型的节点中
td_person.appendChild(person);
td_content.appendChild(content);
//将td类型的节点添加到tr节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr);
//将tr节点加入tbody中
var
tComment = document.getElementById(
"comment"
);
//获取table对象
tComment.appendChild(tbody);
//将节点tbody加入节点尾部
form1.person.value=
""
;
//清空评论人文本框
form1.content.value=
""
;
//清空评论内容文本框
}
|
（4）坚接着编写JavaScript函数delectFirstE(),用于将评论列表第一条信息删除：
|
1
2
3
4
5
6
7
|
//删除第一条评论
function
deleteFirstE(){
var
tComment = document.getElementById(
"comment"
);
//获取table对象
if
(tComment.rows.length>1){
tComment.deleteRow(1);
//删除表格的第二行，即第一条评论，
}
}
|
（5）同样，编写一个自定义的delectLastE()，用于将评论最后一条信息删除：
|
1
2
3
4
5
6
7
|
//删除最后一条评论
function
deleteLastE(){
var
tComment = document.getElementById(
"comment"
);
//获取table对象
if
(tComment.rows.length>1){
tComment.deleteRow(tComment.rows.length-1);
//删除表格的最后一行，即最后一条评论
}
}
|
(6)为了触发前面javascript中所定义的那几个事件，那个就需要加入onclick事件来实现用户单击“发表”、“删除第一条评论”等按钮时的响应了。所以需要在前面web页面中所定义的按钮中加入onClick：
|
1
2
3
|
<input name=
"Button"
type=
"button"
class=
"btn_grey"
value=
"发表"
onClick=
"addElement()"
>
<input name=
"Button"
type=
"button"
class=
"btn_grey"
value=
"删除第一条评论"
onClick=
"deleteFirstE()"
>
<input name=
"Button"
type=
"button"
class=
"btn_grey"
value=
"删除最后一条评论"
onClick=
"deleteLastE()"
>
|
那么DOM文档操作的应用大概先这样记录一下了，继续努力。
本文转自lixiyu 51CTO博客，原文链接：http://blog.51cto.com/lixiyu/1350937，如需转载请自行联系原作者
