DOM(Document Object Model)是表示文档(如HTML文档)和访问、操作说清楚文档的各种元素(如HTML标记和文本串)的应用程序接口(API)。在DOM中,HTML文档中的各个节点被视为各种类型的Node对象,并且将HTML文档表示为Node对象的树。
下面通过一个添加评论和删除评论功能的例子来体验一个DOM操作文档的用法
实现效果图如下:
步骤:
(1)最顶端的小狗与文字没什么好说,就是弄一个表格。下面说说评论和评论内容这块,在页面中添加一个表格(1X2)用于显示评论的列表。代码如下:
<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>
(2)在评论列表下方就是用于收集评论信息,可以通过一个表单去实现评论的输入信息。还有就是下面几个button.详细代码如下:
<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="发表" >
<input name="Reset" type="reset" class="btn_grey" value="重置">
<input name="Button" type="button" class="btn_grey" value="删除第一条评论" >
<input name="Button" type="button" class="btn_grey" value="删除最后一条评论" ></td>
</tr>
</table>
</form>
顺便也把定义的css样式也放出来(按需修改):
/* CSS Document */
<!--
body{
FONT-SIZE: 9pt;
margin-left:0px;
SCROLLBAR-FACE-COLOR: #E5BB93;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #fcfcfc; COLOR: #000000;
SCROLLBAR-3DLIGHT-COLOR: #ececec;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #ececec;
SCROLLBAR-DARKSHADOW-COLOR: #999966;
BACKGROUND-COLOR: #fcfcfc
}
a:hover {
font-size: 9pt; color: #FF6600;
}
a {
font-size: 9pt; text-decoration: none; color: #676767;
noline:expression(this.οnfοcus=this.blur);
}
td{
font-size: 9pt; color: #000000;
padding:5px;
}
.btn_grey {
font-family: "宋体"; font-size: 9pt;color: #333333;
background-color: #eeeeee;cursor: hand;padding:1px;height:19px;
border-top: 1px solid #FFFFFF;border-right:1px solid #666666;
border-bottom: 1px solid #666666;border-left: 1px solid #FFFFFF;
}
input{
font-family: "宋体";
font-size: 9pt;
color: #333333;
border: 1px solid #999999;
}
hr{
border-style:solid;
height:1px;
color:#CCCCCC;
}
-->
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
(3)下面就需要编写自定义的JavaScript函数addElement(),用于在评论列表中添加一条评论信息。在该函数中,首先将评论信息添加到评论列表的后面,然后清空评论人和评论内容文本框。具体代码如下:
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=""; //清空评论内容文本框 }
(4)坚接着编写JavaScript函数delectFirstE(),用于将评论列表第一条信息删除:
//删除第一条评论 function deleteFirstE(){ var tComment = document.getElementById("comment"); //获取table对象 if(tComment.rows.length>1){ tComment.deleteRow(1); //删除表格的第二行,即第一条评论, } }
(5)同样,编写一个自定义的delectLastE(),用于将评论最后一条信息删除:
//删除最后一条评论 function deleteLastE(){ var tComment = document.getElementById("comment"); //获取table对象 if(tComment.rows.length>1){ tComment.deleteRow(tComment.rows.length-1); //删除表格的最后一行,即最后一条评论 } }
(6)为了触发前面javascript中所定义的那几个事件,那个就需要加入onclick事件来实现用户单击“发表”、“删除第一条评论”等按钮时的响应了。所以需要在前面web页面中所定义的按钮中加入onClick:
<input name="Button" type="button" class="btn_grey" value="发表" onClick="addElement()"> <input name="Button" type="button" class="btn_grey" value="删除第一条评论" onClick="deleteFirstE()"> <input name="Button" type="button" class="btn_grey" value="删除最后一条评论" onClick="deleteLastE()">
那么DOM文档操作的应用大概先这样记录一下了,继续努力。
转载于:https://blog.51cto.com/lixiyu/1350937