您的位置：首页 > Web前端 > JavaScript

JS中操作DOM文档

2017-02-14 13:43 253 查看

在前面示例中演示了使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航