應用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文檔操做的應用大概先這樣記錄一下了，繼續努力。