[设为首页] [加入收藏]    
提 示: 站长书库上线了。 站长招聘上人才沃
站长首页  |  站长下载  |  站长工具
站长素材  |  广告代码  |  网页特效
站长书库  |  站长招聘  |  建站软件
  您当前的位置: 首页 > 网络编程 > JavaScript >
JavaScript 文档对象

现在我们将开始讨论更“实际”的话题——文档对象(DOM)。文档对象是指在网页文档里划分出来的对象。在 JavaScript 能够涉及的范围内有如下几个“大”对象:window, document, location, navigator, screen, history 等。下面是一个文档对象树,你可以看到对象下包含对象的“壮观”情景。要引用某个对象,就要把父级的对象都列出来。例如,要引用某表单“applicationForm”的某文字框“customerName”,就要用“document.applicationForm.customerName”。

下表中有些对象是全小写的,有些是以大写字母开头的。以大写字母开头的对象表示,引用该对象不使用下表列出的名字,而直接用对象的“名字”(Id 或 Name,下面有讲解),或用它所属的对象数组指定。

这里我们不准备讲解对象的“事件”,虽然我们也会列出对象所能响应的事件。我们将会在下一章“事件处理”中讲解事件。

navigator 浏览器对象
 screen 屏幕对象
 window 窗口对象
 history 历史对象
 location 地址对象
 frames[]; Frame 框架对象
 document 文档对象
anchors[]; links[]; Link  连接对象
 applets[] Java小程序对象
 embeds[] 插件对象
 forms[]; Form 表单对象
 Button 按钮对象
Checkbox  复选框对象
 elements[]; Element 表单元素对象
Hidden  隐藏对象
 Password 密码输入区对象
Radio  单选域对象
 Reset 重置按钮对象
Select  选择区(下拉菜单、列表)对象
options[]; Option  选择项对象
Submit  提交按钮对象
Text  文本框对象
Textarea  多行文本输入区对象
images[]; Image  图片对象

navigator  浏览器对象 反映了当前使用的浏览器的资料。

属性

appCodeName 返回浏览器的“码名”(?),流行的 IE 和 NN 都返回 'Mozilla'。
appName 返回浏览器名。IE 返回 'Microsoft Internet Explorer',NN 返回 'Netscape'。
appVersion 返回浏览器版本,包括了大版本号、小版本号、语言、操作平台等信息。
platform 返回浏览器的操作平台,对于 Windows 9x 上的浏览器,返回 'Win32'(大小写可能有差异)。
userAgent 返回以上全部信息。例如,IE5.01 返回 'Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)'。
javaEnabled() 返回一个布尔值,代表当前浏览器允许不允许 Java。

screen 屏幕对象 反映了当前用户的屏幕设置。

属性

width 返回屏幕的宽度(像素数)。
height 返回屏幕的高度。
availWidth 返回屏幕的可用宽度(除去了一些不自动隐藏的类似任务栏的东西所占用的宽度)。
availHeight 返回屏幕的可用高度。
colorDepth 返回当前颜色设置所用的位数 - 1:黑白;8:256色;16:增强色;24/32:真彩色

window 窗口对象 最大的对象,它描述的是一个浏览器窗口。一般要引用它的属性和方法时,不需要用“window.xxx”这种形式,而直接使用“xxx”。一个框架页面也是一个窗口。

属性

name 窗口的名称,由打开它的连接(<a target="...">)或框架页(<frame name="...">)或某一个窗口调用的 open() 方法(见下)决定。一般我们不会用这个属性。
status 指窗口下方的“状态栏”所显示的内容。通过对 status 赋值,可以改变状态栏的显示。
opener 用法:window.opener;返回打开本窗口的窗口对象。注意:返回的是一个窗口对象。如果窗口不是由其他窗口打开的,在 Netscape 中这个属性返回 null;在 IE 中返回“未定义”(undefined)。undefined 在一定程度上等于 null。注意:undefined 不是 JavaScript 常数,如果你企图使用“undefined”,那就真的返回“未定义”了。
self 指窗口本身,它返回的对象跟 window 对象是一模一样的。最常用的是“self.close()”,放在<a>标记中:“<a href="javascript:self.close()">关闭窗口</a>”。
parent 返回窗口所属的框架页对象。
top 返回占据整个浏览器窗口的最顶端的框架页对象。
history 历史对象,见下。
location 地址对象,见下。
document 文档对象,见下。

方法

open() 打开一个窗口。用法:open(<URL字符串>, <窗口名称字符串>, <参数字符串>);

<URL字符串>:描述所打开的窗口打开哪一个网页。如果留空(''),则不打开任意网页。

<窗口名称字符串>:描述被打开的窗口的名称(window.name),可以使用'_top'、'_blank'等内建名称。这里的名称跟“<a href="..." target="...">”里的“target”属性是一样的。

<参数字符串>:描述被打开的窗口的样貌。如果只需要打开一个普通窗口,该字符串留空(''),如果要指定样貌,就在字符串里写上一到多个参数,参数之间用逗号隔开。

例:打开一个 400 x 100 的干净的窗口:

open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

参数
 
top=# 窗口顶部离开屏幕顶部的像素数
left=# 窗口左端离开屏幕左端的像素数
width=# 窗口的宽度
height=# 窗口的高度
menubar=... 窗口有没有菜单,取值yes或no
toolbar=... 窗口有没有工具条,取值yes或no
location=... 窗口有没有地址栏,取值yes或no
directories=... 窗口有没有连接区,取值yes或no
scrollbars=... 窗口有没有滚动条,取值yes或no
status=... 窗口有没有状态栏,取值yes或no
resizable=... 窗口给不给调整大小,取值yes或no

open() 方法有返回值,返回的就是它打开的窗口对象。所以,

var newWindow = open('','_blank');

这样把一个新窗口赋值到“newWindow”变量中,以后通过“newWindow”变量就可以控制窗口了。

close() 关闭一个已打开的窗口。

用法:window.close()self.close():关闭本窗口;

<窗口对象>.close():关闭指定的窗口。

如果该窗口有状态栏,调用该方法后浏览器会警告:“网页正在试图关闭窗口,是否关闭?”然后等待用户选择是否;如果没有状态栏,调用该方法将直接关闭窗口。

blur() 使焦点从窗口移走,窗口变为“非活动窗口”。

focus() 是窗口获得焦点,变为“活动窗口”。不过在 Windows 98,该方法只能使窗口的标题栏和任务栏上的相应按钮闪烁,提示用户该窗口正在试图获得焦点。

scrollTo() 用法:[<窗口对象>.]scrollTo(x, y);使窗口滚动,使文档从左上角数起的(x, y)点滚动到窗口的左上角。

scrollBy() 用法:[<窗口对象>.]scrollBy(deltaX, deltaY);使窗口向右滚动 deltaX 像素,向下滚动 deltaY 像素。如果取负值,则向相反的方向滚动。

resizeTo() 用法:[<窗口对象>.]resizeTo(width, height);使窗口调整大小到宽 width 像素,高 height 像素。

resizeBy() 用法:[<窗口对象>.]resizeBy(deltaWidth, deltaHeight);使窗口调整大小,宽增大 deltaWidth 像素,高增大 deltaHeight 像素。如果取负值,则减少。

alert() 用法:alert(<字符串>);弹出一个只包含“确定”按钮的对话框,显示<字符串>的内容,整个文档的读取、Script 的运行都会暂停,直到用户按下“确定”。

confirm() 用法:confirm(<字符串>);弹出一个包含“确定”和“取消”按钮的对话框,显示<字符串>的内容,要求用户做出选择,整个文档的读取、Script 的运行都会暂停。如果用户按下“确定”,则返回 true 值,如果按下“取消”,则返回 false 值。

prompt() 用法:prompt(<字符串>[, <初始值>]);弹出一个包含“确认”“取消”和一个文本框的对话框,显示<字符串>的内容,要求用户在文本框输入一些数据,整个文档的读取、Script 的运行都会暂停。如果用户按下“确认”,则返回文本框里已有的内容,如果用户按下“取消”,则返回 null 值。如果指定<初始值>,则文本框里会有默认值。

事件

onload; onunload; onresize; onblur; onfocus; onerror

history 历史对象 历史对象指浏览器的浏览历史。鉴于安全性的需要,该对象收到很多限制,现在只剩下下列属性和方法。

属性

length 历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。

方法

back() 后退,跟按下“后退”键是等效的。

forward() 前进,跟按下“前进”键是等效的。

go() 用法:history.go(x);在历史的范围内去到指定的一个地址。如果 x < 0,则后退 x 个地址,如果 x > 0,则前进 x 个地址,如果 x == 0,则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。

location 地址对象 它描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址,只需要使用“location”就行了;若要表示某一个窗口的地址,就使用“<窗口对象>.location”。

注意 属于不同协议或不同主机的两个地址之间不能互相引用对方的 location 对象,这是出于安全性的需要。例如,当前窗口打开的是“www.a.com”下面的某一页,另外一个窗口(对象名为:bWindow)打开的是“www.b.com”的网页。如果在当前窗口使用“bWindow.location”,就会出错:“没有权限”。这个错误是不能用错误处理程序(Event Handler,参阅 onerror 事件)来接收处理的。

属性

protocol 返回地址的协议,取值为 'http:','https:','file:' 等等。
hostname 返回地址的主机名,例如,一个“http://www.microsoft.com/china/”的地址,location.hostname == 'www.microsoft.com'。
port 返回地址的端口号,一般 http 的端口号是 '80'。
host 返回主机名和端口号,如:'www.a.com:8080'。
pathname 返回路径名,如“http://www.a.com/b/c.html”,location.pathname == 'b/c.html'。
hash 返回“#”以及以后的内容,如“http://www.a.com/b/c.html#chapter4”,location.hash == '#chapter4';如果地址里没有“#”,则返回空字符串。
search 返回“?”以及以后的内容,如“http://www.a.com/b/c.asp?selection=3&jumpto=4”,location.search == '?selection=3&jumpto=4';如果地址里没有“?”,则返回空字符串。
href 返回以上全部内容,也就是说,返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。如果想一个窗口对象打开某地址,可以使用“location.href = '...'”,也可以直接用“location = '...'”来达到此目的。

方法

reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。

replace() 打开一个 URL,并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后,按下浏览器的“后退”键将不能返回到刚才的页面。

frames[]; Frame 框架对象 请参阅“使用框架和 Cookies”一章。

document 文档对象 描述当前窗口或指定窗口对象的文档。它包含了文档从<head>到</body>的内容。

用法:

document (当前窗口)或 <窗口对象>.document (指定窗口)

属性

cookie 关于 cookie 请参看“使用框架和 Cookies”一章。
lastModified 当前文档的最后修改日期,是一个 Date 对象。
referrer 如果当前文档是通过点击连接打开的,则 referrer 返回原来的 URL。
title 指<head>标记里用<title>...</title>定义的文字。在 Netscape 里本属性不接受赋值。
fgColor 指<body>标记的 text 属性所表示的文本颜色。
bgColor 指<body>标记的 bgcolor 属性所表示的背景颜色。
linkColor 指<body>标记的 link 属性所表示的连接颜色。
alinkColor 指<body>标记的 alink 属性所表示的活动连接颜色。
vlinkColor 指<body>标记的 vlink 属性所表示的已访问连接颜色。

方法

open() 打开文档以便 JavaScript 能向文档的当前位置(指插入 JavaScript 的位置)写入数据。通常不需要用这个方法,在需要的时候 JavaScript 自动调用。

write(); writeln() 向文档写入数据,所写入的会当成标准文档 HTML 来处理。writeln() 与 write() 的不同点在于,writeln() 在写入数据以后会加一个换行。这个换行只是在 HTML 中换行,具体情况能不能够是显示出来的文字换行,要看插入 JavaScript 的位置而定。如在<pre>标记中插入,这个换行也会体现在文档中。

clear() 清空当前文档

close() 关闭文档,停止写入数据。如果用了 write[ln]() 或 clear() 方法,就一定要用 close() 方法来保证所做的更改能够显示出来。如果文档还没有完全读取,也就是说,JavaScript 是插在文档中的,那就不必使用该方法。

现在我们已经拥有足够的知识来做以下这个很多网站都有的弹出式更新通知了。


当然也可以先写好一个 HTML 文件,在 open() 方法中直接 load 这个文件。

    关于我们 - 联系我们 - 广告服务 - 网站地图 - 版权声明 - 人才招聘