DOM(Document Object Model):文档对象模型定义了一套标准方法来访问和操纵HTML文档。
按树状形式结构组织HTML文档,树状结构中的每一个对象称为一个节点,每一个对象都有一个或多个属性与方法。
经验:要会设定文档中元素的ID(如<A id="myAnchor" href="#">淘宝</A>),并且会引用这些ID元素
(如document.getElementById('myAnchor'))就可以访问和控制页面中的所有元素。
浏览器对象是一个分层结构,也称为文档对象模型。 如:window.document.myForm.txt1
一、window对象常用的属性、方法、事件:
1、属性:status 状态栏中显示的临时消息/screen 有关客户端的屏幕和显示性能的信息/
history 访问过的URL的信息/location 当前的URL的信息/document表示浏览器窗口中的HTML文档。
2、方法:alert(" 提示信息") 显示提示信息和确定按钮的对话框/confirm(" 提示信息") 相对于alert多了一个取消按钮/
open("打开窗口的url","窗口名","窗口特征")/close()/showModalDialog("打开对话框的url","对话框名","对话框特征")
3、事件:常用的onload事件,它表示在窗口或框架完成文档加载时触发。用法onload="函数名()"
示例1:
function openwindow()
{
window.status="系统当前状态:您正在注册......";
if(window.screen.width==1024 && window.screen.height==768)
window.open("register.html","注册窗口","toolbars=0,location=0,statusbars=0,menubars=0,width=700,height=550,scrollbars=1");
//toolbars 工具条,包括”后退“和”前进“
//scrollbars是否显示滚动条/location是否显示地址栏/resizable是否可以改变窗口的大小
else
window.alert("请设置分辨率为1024x768,然后再打开");
}
function closewindow()
{
if(window.confirm("您确认要退出系统吗?"))
window.close();
}
也可以通过超链接来调用JavaScript语句如:使用<a href="javascript:openwindow()">退出</a>可以用来关闭当前浏览器窗口。
注意:通常可以省略window,但是当使用层、框架和多窗口时,就不能省略。
二、Date对象和setTimeout()方法做时钟显示:
var 日期对象=new Date(参数);
如果没有指定参数,则表示当前日期和时间。
1、 Date对象的方法组:
setXxx:设置时间和日期值
getXxx:获取时间和日期值
如:var now=new Date();
var hour=now.getHours();
2、setTimeout()方法:(重点)
示例: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+"";
var myTime=setTimeout("disptime()",1000); //1秒等于1000毫秒
}
//调用
//省略代码
<body onLoad="disptime()">
//省略代码
<input name="myclock" type=:"text" value="" size="10">
//代码省略
三、history和location对象:
1、 history对象是通过JavaScript运行时引擎自动创建的,并且是由一系列URLs组成的。
history对象的方法:
back():上一个URL/forward():下一个URL
go("url" or number)
示例:history.go(1)表示前1页 history.go(-1)表示后1页
2、location对象相当于IE浏览器中的地址栏
location对象的属性:
host 设置或返回URL的主机名和端口号
hostname 设置或返回URL的主机名部分
href 设置或返回完整的URL字符串
注:location.href的属性是可以修改的,因此可以使用它来打开新的页面;而documet.URL的属性只能返回不能修改
location对象的方法:
assign("url") 加载URL指定的新的HTML文档
reload()重新加载当前页
replace("url") 通过加载URL指定的文档来替换当前文档
示例:
//代码省略
<a href ="javascript: history.back()">返回</a>
<a href ="javascript: history.forward()">前进</a>
<a href ="javascript: location.reload()">刷新</a>
<select name="selTopic" id="selTopic" 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>
//代码省略