Document对象用来控制窗口或框架中的文档。本章介绍Document对象，首先介绍公用属性，如color、anchors[]、links[]以及基本的方法，如document.write( )，然后转向标准DOM对文档的处理。在DOM部分，除表格处理一节外，其他内容在其他章节中会有更详细的介绍。

16.1 早期文档处理

在支持传统对象模型的早期浏览器中，只能对文档进行很少的操作。Document对象的主要属性都与<body>标签相关，如背景、链接、文本颜色等；而在DOM下，则可对文档进行更多的操作。本节介绍早期文档处理中的一些公用属性。

16.1.1 文档颜色

在传统的JavaScript对象模型中，支持大量的属性，可以对文档及其文本与链接的颜色进行读取与设置。表16-1列出了与文档颜色有关的Document属性，需要注意这些标签与<body>标签的通信方式。

表16-1 与颜色有关的Document属性

Document对象属性	描述
aLinkColor	活动的超级链接的颜色，使用<body alink="颜色">来设置，默认为红色
bgColor	页面背景颜色，使用<body bgcolor="颜色">来设置
fgColor	文档中文本的颜色，使用<body text="颜色">来设置
linkColor	未访问过的链接的颜色，使用<body link="颜色">来设置。默认为蓝色（blue）
vlinkColor	已访问过的链接的颜色，使用<body vlink="颜色">来设置。默认为紫色（purple）

当然，在现代HTML描述中，不鼓励使用上面这些属性。事实上，在DOM 1中就不能很好支持这些属性，而支持JavaScript的浏览器仍旧支持这些属性，并且，在可以预见的将来，仍将对这些属性提供支持。代码16.1是应用这些属性的一个例子。

代码16.1 文档颜色属性应用：16.1.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Document Color Test</title>

<!--

function setColors(form) //函数：设置颜色

{

with (form)

{

//设置文档背景色为新的背景色

document.bgColor = backgroundColor.value;

//设置文档中的文本颜色为新的文本色

document.fgColor = textColor.value;

//设置文档中活动超级链接的颜色为新的活动链接颜色

document.alinkColor = activeLinkColor.value;

//设置文档中超级链接的颜色为新的超级链接颜色

document.linkColor = linkColor.value;

//设置文档中已访问的超级链接颜色为新的颜色

document.vlinkColor = visitedLinkColor.value;

}

//-->

</script>

</head>

<h1>文档颜色属性应用</h1>

<a href="fakeURL.htmp" onclick="return false">未访问过的超级链接</a><br>

<a href="#" onclick="return false">单击验证活动超级链接的颜色</a><br>

<a href="#">访问过的超级链接</a><br>

背景颜色:

<br>

文本颜色:

<h2>超级链接颜色</h2>

未访问过的:

当前活动的:

<input type="text" name="activeLinkColor"

id="activeLinkColor" value="yellow"><br>

已访问过的:

<input type="text" name="visitedLinkColor"

id="visitedLinkColor" value="purple"><br>

</form>

</body>

</html>

上面的代码运行后，显示图16.1所示的效果。先后单击页面中的“访问过的超级链接”和“单击验证活动超级链接的颜色”，使前者变为已访问过的，使后者变为活动的。此时的显示效果如图16.2所示。

图16.1 显示效果图16.2 显示效果

按照页面提示，将背景颜色设置为black，文本颜色设置为white，超级链接颜色中，未访问过的设置为yellow，当前活动的设置为red，已访问过的设置为blue，然后单击“设置颜色”按钮进行提交，会显示图16.3所示的效果。然后，先后单击页面中的“访问过的超级链接”和“单击验证活动超级链接的颜色”，使前者变为已访问过的，使后者变为活动的。此时的显示效果如图16.4所示。

图16.3 显示效果图16.4 显示效果

关于页面背景等其他<body>属性的设置，将在DOM以及DHTML相关的对象模型中进行介绍。

16.1.2 上次修改日期

Document对象的一个非常有用的属性lastModified，返回一个字符串，指出当前文档最后一次被修改（并保存）的具体日期和时间。使用方法见代码16.2。

代码16.2 lastModified：16.2.htm

<html>

<head><title>lastModified</title></head>

<body>

<h1>使用lastModified显示最后修改时间</h1><p>

<!--

//输出文档最后修改时间

document.writeln("文档最后修改于: "+document.lastModified);

//-->

</script>

</body>

</html>

上面代码运行后的显示结果如图16.5所示。

图16.5 显示结果

lastModified的返回值常被认为是Date对象，而事实上却是一个字符串。在该值上，不可直接使用Date对象的属性与方法。因此，下面的代码会出错。

document.writeln("Last Modified Hour: "+document.lastModified.getHours());

要想在该值上使用Date方法，应该使用document.lastModified的返回值，创建新的Date对象实例。

var lastModObj = new Date(document.lastModified); //利用返回值创建对象实例

alert(lastModObj.getHours()); //弹出对话框，获取修改时间中的小时数

代码16.3是lastModified返回值的应用。

代码16.3 lastModified的返回值：16.3.htm

<html>

<head><title>lastModified</title></head>

<body>

<h1> lastModified的返回值</h1><p>

<!--

//显示文档最后修改时间

document.writeln("文档最后修改于: "+document.lastModified);

//从修改时间的返回值创建一个Date对象实例

var lastModObj = new Date(document.lastModified);

//从返回时间中获取分钟数，弹出对话框显示该数值

alert(lastModObj.getMinutes());

//将返回值直接作为Date对象使用，运行到这里时，程序将出错

document.writeln("Last Modified Minute: "+document.lastModified.getMinutes());

//-->

</script>

</body>

</html>

运行上面的代码，除显示文档最后修改时间外，还会弹出一个对话框，显示最后修改时间的具体分钟数，如图16.6所示。单击对话框中的“确定”按钮后，程序继续运行，会出现一个错误提示对话框，如图16.7所示。

图16.6 弹出对话框图16.7 错误提示对话框

16.1.3 定位与相关属性

Document对象支持一些文档定位的属性，包括document.location、document.URL与document.referrer。

1．document.location属性

在Netscape 2浏览器中，document.location是一个只读属性，其值是包含当前文档URL地址的字符串。在其后的浏览器中，该属性还可以进行写入操作。代码16.4是一个写操作的例子。

代码16.4 document.location：16.4.htm

<html>

<head><title>document.location</title></head>

<body>

<h1>document.location写操作</h1><p>

<!--

alert("Current location: "+document.location); //输出当前location

document.location = "http://www.yahoo.com"; // 设置新的location

//-->

</script>

</body>

</html>

在IE浏览器中运行上面的程序，首先弹出一个对话框，显示该文档所在的位置，如图16.8所示。

图16.8 弹出的对话框

由于对location支持的不同，在Mozilla Firefox浏览器中会显示图16.9所示的结果。

图16.9 在Mozilla浏览器中弹出的对话框

可以使用代码16.5中所列的方法，访问document.location的详细属性如路径、端口、协议等。

代码16.5 document.location的详细属性：16.6.htm

<html>

<head><title>document.location</title></head>

<body>

<h1>document.location的详细属性</h1><p>

<!--

//输出当前location

document.write("Current location: "+document.location);

//输出当前路径

document.write("<p>Current URL pathname: "+document.location.pathname);

//输出当前协议

document.write("<p>Current URL protocol: "+document.location.protocol);

//输出当前端口

document.write("<p>Current URL port: "+document.location.port);

//-->

</script>

</body>

</html>

在IE浏览器中运行上面的程序，会显示图16.10所示的结果。

图16.10 显示结果

同上例一样，由于对location支持的不同，在Mozilla Firefox浏览器中会显示图16.11所示的结果。

图16.11 在Mozilla浏览器中的显示结果

注意	由于在本机运行，且使用file协议，所以没有端口号。

2．其他定位属性

document.URL属性的值是一个只读字符串，包含当前文档的URL地址。由于可以被document.location和window.locaion代替，所以该属性很少使用。

document.referrer属性的值也是一个字符串，其内容是引出当前文档URL的源文档的URL地址。例如，代码16.6和代码16.7两个程序。

代码16.6 验证document.referrer：16.6.htm

<html>

<head><title>验证document.referrer</title></head>

<body>

<h1>验证document.referrer</h1><p>

<a href="16.7.htm">点击这里访问<a> <p>

<!--

//输出当前location

document.write("Current location: "+document.location);

//输出当前referrer

document.write("<p>Current referrer: "+document.referrer);

//-->

</script>

</body>

</html>

代码16.7 验证document.referrer：16.7.htm

<html>

<head><title>验证document.referrer</title></head>

<body>

<h1>验证document.referrer</h1><p>

<a href="16.6.htm">点击这里访问<a><p>

<!--

//输出当前location

document.write("Current location: "+document.location);

//输出当前referrer

document.write("<p>Current referrer: "+document.referrer);

//-->

</script>

</body>

</html>

将上面的两段代码放在同一目录下，运行代码16.6，显示结果如图16.12所示。

单击页面中的“点击这里访问”，会在弹出的新窗口中打开16.7.htm，显示结果如图16.13所示。

图16.12 显示结果图16.13 显示结果

对比两个显示结果可以看出，由于直接打开了16.6.htm，所以document.referrer属性为空，而16.7.htm是从16.6.htm中打开的，所以document.referrer属性为http://127.0.0.1/ example/ 16.6.htm。

【查看所有评论(0)条】

当前章节:16.1 早期文档处理

·16.3 使用Document访问传统HTML元素

·16.4 DOM中的相关内容

精通Javascript动态网页编程

当前章节:16.1 早期文档处理

16.1 早期文档处理

16.1.1 文档颜色

16.1.2 上次修改日期

16.1.3 定位与相关属性

1．document.location属性

2．其他定位属性

最近评论

热点评论

当前章节:16.1 早期文档处理

同类图书推荐