Java Web中操作文档

来源：互联网发布：淘宝子账号无锡认证编辑：程序博客网时间：2024/06/06 01:48

下面的代码是应用DOM操作文档，实现添加评论和删除评论的功能，是根据书上给的代码片自己拼接并稍加改动得来的，效果图如下：

<%@ page language="java" pageEncoding="GBk"%><html>  <head>    <title>发表评论</title><link rel="stylesheet" href="CSS/style.css"><script language="javascript">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="";//清空评论内容文本框}//删除第一条评论function deleteFirstE(){var tComment = document.getElementById("comment"); //获取table对象if(tComment.rows.length>1){tComment.deleteRow(1);//删除表格的第二行，即第一条评论，}}//删除最后一条评论function deleteLastE(){var tComment = document.getElementById("comment"); //获取table对象if(tComment.rows.length>1){tComment.deleteRow(tComment.rows.length-1);//删除表格的最后一行，即最后一条评论}}</script>  </head>    <body><table width="600" height="70" border="0" align="center" cellpadding="0" cellspacing="1" bordercolorlight="#FF9933" bordercolordark="#FFFFFF" bgcolor="#666666">  <thead>    <tr>      <td width="14%" align="center" bgcolor="#FFFFFF"><img src="head.jpg" width="70" height="74"></td>      <td width="86%" align="left" bgcolor="#FFFFFF"> 人生若真如一场大梦，这个梦倒也很有趣的。在这个大梦里，一定还有长长短短，深深浅浅，肥肥瘦瘦、甜甜苦苦，无数的小梦。有些已经随着日影飞去；有些还远着哩……</td>    </tr>  </thead></table><br><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><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="发表" onClick="addElement()">             <input name="Reset" type="reset" class="btn_grey" value="重置">             <input name="Button" type="button" class="btn_grey" value="删除第一条评论" onClick="deleteFirstE()">             <input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()"></td>    </tr>  </table>  </form>  </body></html>

首先介绍两种直接搜索文档中指定元素的方法。

1 通过元素ID属性获取元素

使用Document对象的getElementsById()方法可以通过元素的ID属性获取元素。例如，获取文档中ID属性为userList的节点。代码如下：

dounment.getElmentByld("userList")；

2通过元素的name属性获取元素

使用Document对象的getElementsByName()方法可以通过元素的name属性获取元素。与getElementsByName()方法不同的是，该方法的返回值为一个数组，而不是一个元素。如果想通过name属性获取页面中的唯一的元素，可以通过获取返回数组中下标值为0的元素进行获取。例如，获取name属性为username的节点。代码如下：

document.getElementByName("userName")[0];

在DOM中不仅可以通过节点的属性查询节点，还可以对节点进行创建、插入、删除和替换等操作。这些操作都可以通过节点(Node)对象提供的方法来完成。Node对象的常用方法如下表所示：

Node对象常用的方法

方法描述insertBefore(newChild,refChild) 在现有节点refChild之前插入节点 replaceChild(newChild,oldChild)

将子节点列表中的子节点oldChild换成newChild,并返回oldChild

appendChild(newChild)将newChild添加到该节点的子节点列表末尾，如果该节点已经在树中，先将其删除hasChildNodes()返回一个布尔值，表示节点是否有子节点cloneNode(deep)返回这个节点的副本，如果deep的值为true，则复制所有包含的节点，否则只复制这个节点removeChild(oldChild)

将子节点列表中的oldChild删除，并返回oldChild节点

2 0