Java Web中操作文档

最新推荐文章于 2017-02-28 14:29:42 发布

繁华落叶草

最新推荐文章于 2017-02-28 14:29:42 发布

阅读量705

点赞数 2

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/wht18720080085/article/details/53898529

版权

JavaWeb 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

下面的代码是应用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

收藏

觉得还不错? 一键收藏
0
评论
Java Web中操作文档

下面的代码是应用DOM操作文档，实现添加评论和删除评论的功能，是根据书上给的代码片自己拼接并稍加改动得来的，效果图如下：发表评论 function addElement() { //创建TextNode节点 var person = document.createTextNode(form1.person.value); var content = docum
复制链接

扫一扫