2。1 DOM 模型介绍
2。1。1 HTML文档的树状结构
树状结构中的每一对象称为一个节点,每一个对象都有一个或多个属性与方法。节点又分为根节点为父节点,子节点,兄弟节点和叶子节点。
2。1。2 什么是DOM
DOM——Document Object Model,它是W3C国际组织的WEB标准。它定义了访问HTML文档对象的属性,方法和事件的标准。
DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构,然后才能做其他工作。由于它是基于信息层次的,因而DOM被认为是基于树或基于对象的,别外,文档对象模型是给HTML与XML文件使用的一组API。它提供了文件结构表述,通过使用JavaScript可以重构一个完整的HTML文档,也能增加,删除,修改和重新安排页面中的任何元素。其本质是建立网页与脚本语言或程序语言沟通的桥梁。
下面通过示例来说明如何使用JavaScript来改变网页中指定元素的值。
示例:
<HTML>
<HEAD>
<SCRIPT type="text/JavaScript">
function changeLink()
{
document.getElementById('myAnchor').innerHTML="搜狐";
document.getElementById('myAnchor').href="http://www.sohu.com";
}
</SCRIPT>
</HEAD>
<BODY>
<A id="myAnchor" href="http://www.sohu.com">淘宝</A>
<INPUT type="button" onClick="changeLink()" value="使用DOM改变链接">
</BODY>
</HTML>
2.1.3 DOM对象模型
浏览器包括的对象有:window,document,link,form,anchor等。定位一下对象应该从上往下定位如:
window.document.myform.text1。window为所有内容的根对象,所以可以省略,改定成如下:
document.myform.text1。
2。2 window对象的常用属性,方法,事件介绍
2。2。1 常用属性
status 指定浏览器状态栏中显示的临时消息
screen 有关客户端的屏幕和显示性能的信息
history 访问过的URL信息
location 当前URL信息
document 表示浏览器是的HTML文档
2。2。2 常用方法
alert("提示信息") 显示一个带有提示信息和确定按钮的对话框
confirm("提示信息") 显示一个带有提示信息,确定和取消按钮的对话框
open("url","name") 打开具有指定名称的新窗口,并加载给定URL所指定的文档;如果没有提供URL,则打开一个空白文档
close() 关闭当前窗口
showModlDialog() 在一个模式窗口中显示指定的HTML文档
2。2。3 常用事件
onload事件 下面我们通过多个示例来学习最常用的弹出窗口
示例1:
<HTML>
<HEAD>
<TITLE>window对象</TITLE>
<SCRIPT language="JavaScript">
function openwindow()
{
window.status="系统当前状态:您正在注册用户";
if (window.screen.width==1024&&window.screen.height==768)
window.open("register.html");
else
window.alert("请设置分辨率为1024*768,然后再打开");
}
function closeWindow()
{
if(window.confirm("你确认要退出系统吗?"))
window.close();
}
</SCRIPT>
</head>
<body bgcolor="#cccccc">
<table border="0" align="center" bgcolor="#ffffff">
<tr>
<td><IMG src="image/head.jpg" width="761" height="389" ></td>
</tr>
<tr><td>
<IMG src="images/foot.jpg" width="502" height="90" align="top">
<input type="button" name="regButton" value="用户注册" οnclick="openwindow()">
<input type="button" name="exitButton" value="退出" οnclick="closeWindow()"></td>
</tr>
</table>
</body>
</html>
open()窗口特征
height 窗口高度
width 宽度
toolbas 浏览器工具条是不显示,yes为显示
scrollbars 是否显示滚动条
menubar 表示菜单样
location 是否显示地址栏,yes或1为是
status 是否显示状态栏内的信息,yes或为1允许
resizable 是否允许改变窗口的大小,yes或为1为是
我们需要预先制作好注册页面"register.html"打开注册页面的语句如下所示:
ope("register.html","注册窗口","toolbars=0",location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1")即表示打开的网页为register.html;窗口名称为“注册窗口”;toolbars=0表示无工具栏;location=0表示无地址栏;statusbars=0,表示无状态栏;menubars=0表示无菜单栏;打开窗口的宽为700像素,高为550像素;xcrollbars=1表示显示滚动条。完整代码如下:
示例2
<html>
<head>
<title>window Object</title>
<script language="JavaScript">
function openwindow()
{
window.status="系统当前状态:您正在注册用户";
if (window.screen.width==1024 && window.screen.height==768)
open("register.html","注册窗口","toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1")
else
window.alert("");
}
function close()
{
if(window.confirm(""))
window.close();
}
</script>
</head>
<body>
<table border="0" align="center" bgcolor="#ffffff">
<tr>
<td><img src="images/head.jpg" width="761" height="389"></td>
</tr>
<tr><td>
<img src="images/foot.jpg" width"502" height="90" align="top">
<input type="button" name="regButton" value="用户注册" οnclick="openwindow()">
<input type="button" name="exitButton" value="退出" οnclick="closewindow()"></td>
</tr>
</table>
</body>
</html>
示例2中,如果想把按钮的单击事件改为响应链接事件,也就是单击一个超链接调用JavaScript相关代码也能打开注册页面。
示例3
<tr>
<td width=""502>
<IMG src="images/foot.jpg" width="502 height="90" align="top">
</td>
<td withd="86" valign="top">
<H3><A href="javascript:openwindow()">用户注册</A></H3>
</td>
<td width="263" valign="top">
<H3><A href="javascript:closewindow()">退出</A><H3>
</td>
</tr>
下面进了弹出窗口的示例,这下你就明白那些万恶的网站是怎样来打广告的了。这要使用一个onload事件,请留意
示例4:
<html>
<head>
<script language="JavaScript">
function openwindow()
{
open("adv.htm","广告窗口","toolbars=0,scrollbars=0,location=0,statusbars=0,menubars=0,resizable=0,width=700,height=250");
}
</script>
<style type="text/css">
body{background-image:url(images/index_image.jpg);}
</style>
</head>
<body onLoad="openwind()" >
<H2> </H2>
</body>
</html>
模式对话框的实现:
showModalDialog("url","对话框名","对话框特征")和open()使用方式类式,这里不详细说明了。
2。3 Date对象和setTimeout()方法做时钟显示
2。3。1 Date对象常用的方法
创建日期对象的语法如下:
var 日期对象=new Date(参数);
没有参数,即表示当前时间,参数的格式“MM DD,YYYY,hh:mm:ss”表示日期和时间,例如:
var tdate=new Date("July 29,2009,21:29:00");
Date对象的方法组见表:
setXxx 这些方法用于设置时间和日期值
getXxx 这些方法用于获取时间和日期值
使用get分组的方法
getDate()
getDay() 返回星期几
getHours()
getMinutes()
getSeconds()
getMonth()
getFullYear()
getTime() 返回自某一时刻(1970年1月1日)以来的毫秒数
使用set分组的方法
setDate()
setHours()
setMinutes()
setSeconds()
setTime()
setMonth()
setFullYear()
示例5
<html>
<head>
<title>Date Object</title>
<script language="JavaScript">
function disptime()
{
var now=new Date();
var hour=now.getHours();
if(hour>=0 && hour<=12)
document.write("<H2>上午好</H2>");
if(hour>12 && hour<=18)
document.write("<H2>下午好</H2>");
if(hour>18 && hour<24)
document.write("<H2>晚上好</H2>");
document.write("<H2>今天日期:"+now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日</H2>");//看来懂这句的,多想一下!
document.write("<H2>现在时间:"+now.getHours()+"点"+now.getMinutes()+"分</H2>");
}
</script>
</head>
<body >
</body>
</html>
这只是一个静态的显示时间的例子,若要动态的显示时间怎么办呢?看下面
2。3。2 setTimeout()方法
语法:setTimeout("disptime()",1000);
示例6 动态显示时间
<html>
<head>
<title>setTimeout() 方法</title>
<script Language="JavaScript">
function disptime()
{
var time=new Date();
var hour=time.getHours();
var minute=time.getMinutes();
var second=time.getSeconds();
/*设置文本框的内容为当前时间*/
document.myform.myclock.value=hour+":"+minute+":"+second+" ";
/*设置定时器每隔1秒(1000毫秒),调用函数disptime()执行,刷新时钟显示*/
var myTime=setTimeout ("disptime()",1000);
}
</script>
<style type="text/css">
input
{
font-size:30px;
border-style:none;
background-color:#FF8B3B;
}
</style>
</head>
<body onLoad="disptime()">
<form name="myform">
<table width="100%" border="0" align="center">
<tr>
<td colspan="3">
<IMG src="images/mosou.jpg" width="1001" height="457">
</td>
</tr>
<tr>
<td width="37%"> </td>
<td width="41%"><H2>当前时间:
<input name="myclock" type="text" value="" size="10">
</H2></td>
<td width="22%"> </td>
</tr>
</table>
</form>
</body>
</html>
2。4 history 和location对象
2。4。1 history对象
方法:
back() 加载上一个URL
forward() 加载下一个URL
go("url" or number) 加载列表中被指定的URL,或要求浏览器移动指定的页面数
2。4。2 location 对象
1。属性
host 设置或返回URL的主机名和端口号
hostname 设置或返回URL的主机名部分
href 设置或返回完整的URL字符串
2。方法
assign("url") 加载URL指定的新的HTML文档
reload() 重新加载当前页
replace("url") 通过加载URL指定的文档来替换当前文档
以下示例实现跳转菜单的功能。
示例7
<html>
<head>
<title>教育</title>
<Style type="text/css">
A
{
color:blue;
text-decoration:none;
}
A:hover
{
color:red;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<IMG src="../images/head1.jpg" width="994" height="37"></td>
<tr>
<td width="15%"> </td>
<td width="32%"><A href="#">1</A><A href="#"></A>
<A href="#"> 2</A><A href="#"></A>
<A href="#"> 3</A><A href="#"> 4</A>
<A href="#"></A><A href="#"> 5</A><A href="#"></A>
<A href="#"> 6</A><A href="#"> 下一页</A></td>
<TD width="4%">
<A href="javascript:history.forward()">前进</A></td>
<td width="4%">
<A href="javascript:history.back()">返回</A></td>
<td width="4%">
<A href="javascript:location.reload()">刷新</A>
</TD>
<td width="6%">
<A href="../index.html">首页</A>
</td>
<td width="35%">
<select name="selTopic" id="selPtopic" onChange="javascript:location=this.value">
<option value="news.html">新闻贴图</option>
<option value="gard.html">网上谈兵</option>
<option value="IT.html">IT 茶馆</option>
<option value="education.html" selected>教育大家谈</option>
</select>
</td>
</tr>
<tr>
<td colspan="7">
<IMG src="../images/content1.jpg" width="995" height="576">
</TD>
</tr>
</table>
</form>
</body>
</html>
同样,history对象的go(-1)和go(1)方法也能实现前进和后退功能,关键代码如下:
<td><A href="javascript:history.go(-1);">返回</A></td>
<td><A href="javascript:history.go(1)">前进</A></td>
当JavaScript语句较少时,可以直接插入代码;当语句较多时,应把语句放在一个函数中,然后调用函数,这是一个良好的编程习惯。