JavaScript实验程序设计——DOM访问

JavaScript实验程序设计——DOM访问

预 习 报 告

实验题目：DOM访问

预习内容：

1.HTML DOM框架
2.Document对象
⑴document对象的集合；⑵document对象的属性；⑶document对象的方法
3.DOM对象的属性
⑴innerHTML属性；⑵firsChild属性；⑶nodeName属性；⑷nodeValue属性；⑸LastChild属性；⑹nodeType属性；⑺NextSibling属性；⑻parentNode属性
4.DOM对象的方法
⑴appendChil()方法；⑵removeChild()方法；⑶replaceChild()方法；⑷insertBefore()方法；⑸getAttribute()方法；⑹setAtribute()方法；

实验目的与要求（及主要实验仪器、设备）：

1．掌握文档对象的属性；
2．掌握文档对象的属性方法；
3．掌握文档对象的使用方式。
实验环境： Windows 7/Windows 10 + HBuilderX

实验原理（方法与与原理分析）：

1.body :提供对文档中body元素的访问
2.cookie :设置或返回与当前文档有关的所有cookie
3.domain :返回下载当前文档的服务器域名
4.lastModified :返回文档最后被修改的日期和时间
5.referrer :返回载入当前文档的文档的URL
6.title :返回当前文档的标题（HTMLtitle元素中的文本）
7.URL :返回当前文档的URL

实验步骤（程序代码与实验过程）：

1.DOM效果

<br>
<fieldset style="text-align: center;float: center;">
<legend>优秀书籍</legend>书籍名称：<input type="text" name="" id="readername" value="" /><br>书籍作者：<input type="text" name="" id="bookname" value="" /><br>
<input type="button" name="" id="readername" value="添加"onclick="addRow()"/>
<table style="text-align: center;float: center;" border="" cellspacing="" cellpadding="" id='tab1'>
<thead >
<td>序号</td>
<td>书籍名称</td>
<td>工书籍作者</td>
<td>删除</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>魔天</td>
<td>狂奔的蜗牛</td>
<td>2020-05-23</td>
<td><a href="javascrip">删除</a></td></tr>
<tr>
<td>2</td>
<td>巫皇</td>
<td>傲天无痕</td>
<td>2020-05-23</td>
<td><a href="javascrip">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>第一战神</td>
<td>我本纯洁</td>
<td>2020-05-23</td>
<td><a href="javascrip">删除</a></td>
</tr>
</tbody>
</table>
</fieldset>
</body>
<script type="text/javascript">
var oTable=document.getElementById('tab1');
//保存选中之前的颜色
var oldcolor='';//alert(oTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1]//getElementsByTagName('td')[1].innerHTML);
//alert(oTable.tBodies[0].rows[1].cells[1].innerHTML)for(var i=0;i<oTable.tBodies[0].rows.length;i++)
{
if(i%2==0)
{oTable.tBodies[0].rows[i].style.background='pink';}
else{oTable.tBodies[0].rows[i].style.background='';}
//鼠标移入处理
oTable.tBodies[0].rows[i].onmouseover=function()
{oldcolor=this.style.background;
this.style.background='yellow';}
//鼠标移出处理
											oTable.tBodies[0].rows[i].onmouseout=function(){
this.style.background=oldcolor;}
}
function addRow()
{
var vReadername=document.getElementById('readername').value;
var vBookname=document.getElementById('bookname').value;
var oTd=document.createElement('td');
oTd.innerHTML=oTable.tBodies[0].rows.length+1;
											
var oTr=document.createElement('tr');
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=vReadername;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML=vBookname;
oTr.appendChild(oTd);
var oTd=document.createElement('td');
var d=new Date();
Var arrDay=[d.getFullYear().toString(),(d.getMonth()+1).toString(),d.getDate().toString()];
oTd.innerHTML=arrDay.join('-')
oTr.appendChild(oTd);
var oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript: ;">删除</a>'
oTr.appendChild(oTd);
oTable.tBodies[0].appendChild(oTr);
oTd.getElementsByTagName('a')[0].onclick=function()
{oTable.tBodies[0].removeChild(oTr)}}
</script>
</tr></table></td> </tr></table></td></tr>

2.javaScript技术界面交互

 <tr>
<td><img style="height: 100px" src="http://static.zongheng.com/upload/cover/c2/da/c2da0505bb634c19d140941497242342.jpeg"></td>
<td style="width: 200px;vertical-align: top;line-height: 30px">作者:乱世狂刀<br/>出版社:纵横中文网<br />出版时间：2019年10月20日<br />页数：1198页<br />类别：奇幻玄幻<br /></td>
<td style="vertical-align:top;"><div id="star">
<span>评价：一个不正常的人连带着一个不正常的世界，内容有毒，谨慎入坑防止上不来。</span><br />
<ul>
 <li class="listar"><a href="javascript:;">1</a></li>
 <li class="listar"><a href="javascript:;">2</a></li>
 <li class="listar"><a href="javascript:;">3</a></li>
 <li class="listar"><a href="javascript:;">4</a></li>
<li class="listar"><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p></p>
</div><br /></td></tr>

实验结果（数据分析与结论）：

1.展示DOM效果

2.展示界面的互换

问题讨论：

问：如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表：
答：
Var tables = document.getElementsByTagName(“table”);
alert(“This document contains contains”+tables.length+“tables”);