JS中操作DOM文档

来源：互联网发布：dhcp服务端小软件编辑：程序博客网时间：2024/05/11 01:34

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

0 0