最近评论
正在载入评论列表...
案例3-4 使用DOM提供的方式访问HTML文档中的对象
在Eclipse中新建一个项目，项目的名称为“P34_DOM”。在该项目中新建一个HTML文档，对应的页面名称为dom1.html。页面的源代码如下：
源程序名称：dom1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript">
function check()
{
if(document.myform.txt1.value=="")
alert("请输入姓名！");
else
alert("您的姓名是："+document.myform.txt1.value);
}
</script>
</head>
<body>
<form name="myform" action="">
<p>
请输入您的姓名：
<input type="text" name="txt1" value="">
</p>
<p>
<input type="button" value="确定" name="ok" onclick="check()">
</p>
</form>
</body>
</html>
注意该程序中定位文本框的方式。该程序可以在用户单击确定按钮后，检查用户是否在文本框中输入了姓名，如果用户未输入对应的内容，则提示用户输入。
页面效果如图3-25所示。
图3-25 使用DOM定位
另外一个非常常用的对象是window对象，该对象提供的方法如下所示。
· open(URL,windowName,parameterList)：open方法创建一个新的浏览器窗口，并在新窗口中载入一个指定的URL地址；
· close()：close方法关闭一个浏览器窗口；
· alert()：弹出一个消息框；
· confirm()：弹出一个确认框；
· promt()：弹出一个提示框；
· setTimeout(expression,time)：定时设置，在一定的时间后自动执行expression的代码，使用time设置时间，单位是毫秒；
· clearTimeout(timer)：取消利用setTimeout的定时设置；
· setIntervel(expression,time)：设定一个时间间隔，可以定时反复的自动执行expression描述的代码，使用time设置时间，单位是毫秒。
例如：我们在页面中经常看到的自动弹出的广告窗口，往往是使用window对象的open()方法，打开窗口，并显示指定的页面。示例程序如下：
源程序名称：dom11.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" type="text/javascript">
function advertis()
{
window.open("ad.htm","my","toolbar=no, left=150, top=200, menubar=no, width=250,height=200");
}
</script>
</head>
<body onload = "advertis()">
<form name="myform" action="">
<p>
请输入您的姓名：
<input type="text" name="txt1" value="">
</p>
<p>
<input type="button" value="确定" name="ok" onclick="check()">
</p>
</form>
</body>
</html>
在上面的例子中window.open("ad.htm","my","toolbar=no, left=150, top=200, menubar=no, width=250,height=200")；语句中指定了在该窗口中需要显示的页面，也可以是浏览器能够显示的其他类型的文件，例如：图片文件。上例中的页面在打开时将自动弹出小窗口，并在该窗口中显示事先制作完成的广告页面。页面效果如图3-26所示。
图3-26 广告窗口的自动弹出
在下面的程序中，我们将完成页面中常见的飘浮广告的功能，读者同样可以关注一下在使用文档中对象时的访问方式。同时，在该程序中也综合运用了CSS层叠样式表，脚本编程的知识。代码如下：
源程序名称：dom2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="javascript" type="text/javascript">
var x1=10;
var y1=-10;
//控制图片移动的函数
function fly(){
flypic.style.top = parseInt(flypic.style.top) - y1;
flypic.style.left = parseInt(flypic.style.left) - x1;
if (parseInt(flypic.style.top) < 0){
y1=-y1;
}
if (parseInt(flypic.style.top)>300){
y1=-y1;
}
if (parseInt(flypic.style.left) < 0){
x1=-x1;
}
if (parseInt(flypic.style.left) >630){
x1=-x1;
}
winow.setTimeout("fly()", 300);
}
</script>
</head>
<body onload="fly()">
<div id="flypic" style="position:absolute; top:20; left:40">
<img src="smile.gif" alt="">
</div>
</body>
</html>
在实现了上述的程序功能后，我们也同样可以实现页面中另一种随滚动条滚动的常见的飘浮广告的功能。代码如下：
源程序名称：dom3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dom3.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="javascript">
//控制图片移动的函数
function moveIt() {
truck.style.top= document.body.scrollTop+parseInt(document.body. clientHeight)- 90;
window.setTimeout('moveIt()', 1000);
}
</script>
</head>
<body BGCOLOR="#ffffff" TEXT="#000000" link="#0000ff" Vlink="#660099" onload="moveIt()">
<div id="truck" style="position:relative; top:30px; left:500px; width:40px; height:16px;">
<img src="smile.gif">
</div>
</body>
</html>
上面的程序中利用document对象获取到了垂直滚动条的位置，从而动态控制广告图片的位置，为了查看效果，读者可以在该页面中添加更多的内容，使页面长度增加，从而出现滚动条。
在后续章节中介绍XML DOM的使用方法，同时介绍更加深入的结合DOM操作HTML文档的方法。
图书导读
