本文详细介绍 JavaScript 中的 Document 文档对象,涵盖其作为 window 属性获取当前或指定窗口文档的方法。重点解析文档标题、背景色、链接颜色等常用属性,以及 open、write、close 等核心方法,并结合弹出式更新通知示例代码,展示实际应用场景。
Document 对象概述与获取方式
Document 文档对象是 JavaScript 中 window 和 frames 对象的一个属性,用于表示显示在窗口或框架内的文档。它描述了当前窗口或指定窗口对象所对应的文档内容,包含了从 <head> 到 </body> 的全部文档结构。
获取方式:通过 document 关键字可直接访问当前窗口的文档对象;若需访问指定窗口,则使用 <窗口对象>.document 语法。
Document 常用属性详解
主要属性包括:
document.title:用于设置或获取文档标题,功能等价于 HTML 中的 <title> 标签。
document.bgColor:用于设置页面的背景颜色。
document.fgColor:用于设置文本的前景色(即文字颜色)。
document.linkColor:用于设置未点击过的链接颜色。
document.alinkColor:用于设置激活状态下的链接颜色(即鼠标焦点停留在该链接上时的颜色)。
document.vlinkColor:用于设置已点击过的链接颜色。
document.URL:用于设置或获取当前文档的 URL 地址,通过修改此属性可在同一窗口中打开另一个网页。
document.fileCreatedDate:只读属性,返回文件的创建日期。
document.fileModifiedDate:只读属性,返回文件的最后修改日期。
document.fileSize:只读属性,返回文件的大小。
document.cookie:用于设置和读取 Cookie 数据。
document.charset:用于设置字符集,例如简体中文环境通常设置为 gb2312。
关于 Cookie 的更详细信息,请参阅“使用框架和 Cookies”相关章节。
lastModified:返回当前文档的最后修改日期,其值为一个 Date 对象。
referrer:如果当前文档是通过点击链接打开的,该属性返回来源页面的 URL。
title:指 <head> 标记中由 <title>...</title> 定义的文字内容。注意:在 Netscape 浏览器中,此属性不支持赋值操作。
fgColor:对应 <body> 标记中 text 属性所定义的文本颜色。
bgColor:对应 <body> 标记中 bgcolor 属性所定义的背景颜色。
linkColor:对应 <body> 标记中 link 属性所定义的普通链接颜色。
alinkColor:对应 <body> 标记中 alink 属性所定义的活动链接颜色。
vlinkColor:对应 <body> 标记中 vlink 属性所定义的已访问链接颜色。
Document 核心方法与应用示例
主要方法包括:
open():打开文档以便 JavaScript 向当前文档位置写入数据。通常情况下无需手动调用,JavaScript 会在需要时自动调用此方法。
write() 和 writeln():用于向文档写入数据,写入的内容会被作为标准 HTML 处理。writeln() 与 write() 的区别在于,writeln() 在写入数据后会添加一个换行符。需要注意的是,这个换行符仅在 HTML 源码中体现,是否显示为视觉上的换行取决于 JavaScript 插入的位置。例如,若插入在 <pre> 标记中,换行效果会直接体现在文档显示中。
clear():用于清空当前文档的所有内容。
close():关闭文档并停止数据写入。如果使用了 write[ln]() 或 clear() 方法,必须调用 close() 以确保所做的更改能够正确显示。如果文档尚未完全加载(即 JavaScript 代码直接嵌入在文档中),则无需使用此方法。
基于上述知识,我们可以实现一个常见的网站弹出式更新通知功能。
<script language="JavaScript">
var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' +
'menubar=no,toolbar=no,directories=no,location=no,' +
'status=no,resizable=no,scrollbars=yes');
whatsNew.document.write('<center><b>更新通知</b></center>');
whatsNew.document.write('<p>最后更新日期:00.08.01');
whatsNew.document.write('<p>00.08.01:增加了“我的最爱”栏目。');
whatsNew.document.write('<p align="right">' +
'<a href="javascript:self.close()">关闭窗口</a>');
whatsNew.document.close();
</script>
此外,也可以预先编写好一个 HTML 文件,并在 open() 方法中直接加载该文件以实现类似效果。