应用DOM操做文档的一个实用例子

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.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(),用于在评论列表中添加一条评论信息。在该函数中，首先将评论信息添加到评论列表的后面，而后清空评论人和评论内容文本框。具体代码以下：

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