DOM（Document Object Model）是表示文档（如HTML文档）和访问、操作说清楚文档的各种元素（如HTML标记和文本串）的应用程序接口（API）。在DOM中，HTML文档中的各个节点被视为各种类型的Node对象，并且将HTML文档表示为Node对象的树。

下面通过一个添加评论和删除评论功能的例子来体验一个DOM操作文档的用法

实现效果图如下：

步骤：

（1）最顶端的小狗与文字没什么好说，就是弄一个表格。下面说说评论和评论内容这块，在页面中添加一个表格（1X2）用于显示评论的列表。代码如下：

<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.详细代码如下：

<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">&nbsp;</td><td width="481">&nbsp;</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">&nbsp;</td><td><input name="Button" type="button" class="btn_grey" value="发表" >&nbsp;<input name="Reset" type="reset" class="btn_grey" value="重置">&nbsp;<input name="Button" type="button" class="btn_grey" value="删除第一条评论" >&nbsp;<input name="Button" type="button" class="btn_grey" value="删除最后一条评论" ></td></tr></table></form>

顺便也把定义的css样式也放出来（按需修改）：

/* CSS Document */
<!--
body{FONT-SIZE: 9pt;margin-left:0px;SCROLLBAR-FACE-COLOR: #E5BB93;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;SCROLLBAR-SHADOW-COLOR: #fcfcfc; COLOR: #000000;SCROLLBAR-3DLIGHT-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.οnfοcus=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(),用于在评论列表中添加一条评论信息。在该函数中，首先将评论信息添加到评论列表的后面，然后清空评论人和评论内容文本框。具体代码如下：

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(),用于将评论列表第一条信息删除：

//删除第一条评论
function deleteFirstE(){var tComment = document.getElementById("comment"); //获取table对象if(tComment.rows.length>1){tComment.deleteRow(1);      //删除表格的第二行，即第一条评论，}
}

（5）同样，编写一个自定义的delectLastE()，用于将评论最后一条信息删除：

//删除最后一条评论
function deleteLastE(){var tComment = document.getElementById("comment"); //获取table对象if(tComment.rows.length>1){tComment.deleteRow(tComment.rows.length-1); //删除表格的最后一行，即最后一条评论}
}

(6)为了触发前面javascript中所定义的那几个事件，那个就需要加入onclick事件来实现用户单击“发表”、“删除第一条评论”等按钮时的响应了。所以需要在前面web页面中所定义的按钮中加入onClick：

<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文档操作的应用大概先这样记录一下了，继续努力。