JS中操作DOM文档

u010142437

已于 2022-04-18 16:56:18 修改

阅读量1.1k

点赞数 1

分类专栏： HTML JavaScript 文章标签：文档 dom javascript 节点 Node

于 2017-02-14 13:43:37 首次发布

本文链接：https://blog.csdn.net/u010142437/article/details/55097593

版权

JavaScript 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

HTML

12 篇文章 0 订阅

订阅专栏

随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)

在前面示例中演示了使用DOM技术遍历文档，在DOM中不仅可以通过节点的属性查询节点，还可以对节点进行创建、插入、删除和替换等操作。这些操作都是通过节点(Node)对象提供的方法来完成。Node对象的常用方法如下：

下面用一个示例，操作DOM文档，实现添加评论和删除评论功能：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>遍历文档</title>

		<script language="JavaScript">

			//新增评论
			function addComment() {
				var person = document.createTextNode(form1.person.value);
				var content = document.createTextNode(form1.content.value);
				var td_person = document.createElement("td");
				var td_content = document.createElement("td");
				var tr = document.createElement("tr");
				var tbody = document.createElement("tbody");

				td_person.appendChild(person);
				td_content.appendChild(content);

				tr.appendChild(td_person);
				tr.appendChild(td_content);

				tbody.appendChild(tr);

				var tComment = document.getElementById("comment");
				tComment.appendChild(tbody);//将节点tbody加入表格节点尾部
				form1.person.value = "";
				form1.content.value = "";
			}
			
			//删除第一条评论
			function delFirstComment(){
				var tComment=document.getElementById("comment");
				if(tComment.rows.length>1){
					tComment.deleteRow(1);
				}
			}
			
			//删除最后一条评论
			function delLastComment(){
				var tComment=document.getElementById("comment");
				if(tComment.rows.length>1){
					tComment.deleteRow(tComment.rows.length-1)
				}
			}
			
		</script>

	</head>

	<body>
		<table width="600" border="1" align="center" cellpadding="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
			<tr>
				<td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
				<td width="82%" height="27" align="center" bgcolor="#E5BB93">评论内容</td>
			</tr>
		</table>
		<form name="form1" method="post" action="">
			评论人：<input name="person" type="text" id="person" size="40" /> <br>
			评论内容：
			<textarea name="content" cols="60" rows="6" id="content"></textarea>
		</form>
		
		<input name="Button" type="button" class="btn_grey" value="发表" onclick="addComment()">
		<input name="Reset" type="button" class="btn_grey" value="重置">
		<input name="Button" type="button" class="btn_grey" value="刪除第一条评论" onclick="delFirstComment()">
		<input name="Button" type="button" class="btn_grey" value="刪除最后一条评论" onclick="delLastComment()">
		
	</body>

</html>