JavaScript学习(二十四)——文档对象(document对象)

233 阅读9分钟

目录

文档对象概述

文档对象的常用属性、方法和事件

document对象的属性

document对象的方法

document对象的事件

document对象的应用

查看文档创建日期、修改日期和文档大小

(1) fileCreatedDate 属性fileCreatedDate属性用来获取文档的创建日期。

(2) fileModifiedDate 属性fileModifiedDate属性用来获取文档最后修改的日期。

(3) lastModified 属性lastModified属性用来获取文档最后修改的时间。

(4) fileSize属性fileSize属性用来获取文档的大小。

例子:查看文档创建日期、修改日期和文档大小

动态标题栏

获取并设置URL

获取对象的当前状态

例子:获取对象的当前状态

 


文档对象概述

文档对象(document) 代表浏览器窗口中的文档,该对象是window对象的子对象,由于window对象是DOM对象模型中的默认对象,因此window对象中的方法和子对象不需要使用window来引用。通过document对象可以访问HTML文档中包含的任何HTML标记,并可以动态地改变HTML标记中的内容,例如表单、图像、表格和超链接等。该对象在JavaScript 1.0 版本中就已经存在,在随后的版本中又增加了几个属性和方法。

document对象层次结构如图所示。

文档对象的常用属性、方法和事件

document对象的属性

属性说明
alinkColor超链接文字的颜色,对应于标记中的alink属性
all[ ]存储HTML标记的一个数组(该属性本身也是一个对象)
anchors[ ]存储锚点的一个数组(该属性本身也是一个对象)
bgColor文档的背景颜色
cookie表示cookie的值
fgColor文明的文本颜色(不包含超链接的文字)对应于标记中的text属性
forms[ ]存储窗体对象的一个数组(该属性本身也是一个对象)
fileCreateDate创建文档的日期
fileModifiedDate文档的最后修改日期
fileSize当前文件的大小
lastModified文档的最后修改时间
images[ ]存储图像对象的一个数组(该属性本身也是一个对象)
linkColor未被访问的超链接文字的颜色,对应标记中的link属性
links[ ]存储link对象的一个数组(该属性本身也是一个对象)
vlinkColor表示已访问的超链接文字的颜色,对应于标记的vlink属性
title当前文档标题对象
body当前文档主体对象
readyState获取某个对象的当前状态
URL获取或设置URL

document对象的方法

方法说明
close文档的输出流
open打开一个文档输出流并接收write()和writeln()方法的创建页面内容
write向文档中写入HTML或JavaScript语句
writeln向文档中写入HTML或JavaScript语句,并以换行符结束
createElement创建一个指定的HTML标记
getElementById获取指定id的HTML标记

document对象的事件

多数浏览器内部对象都拥有很多事件,下面将以表格的形式给出常用的事件及何时触发这些事件。

事件何时触发
onabort对象载入被中断时触发
onblur元素或窗口本身失去焦点时触发
onchange改变select元素中的选项或其他表单元素失去焦点,并且在其获取焦点后的内容发生过改变时触发
onclick单击时触发。当光标的焦点在按钮上,并按下enter键时,也会触发该事件
ondblclick双击时触发
onerror出现错误时触发  
onfocus任何元素或窗口本身获得焦点时触发
onkeydown键盘上的按键(包括Shift或Alt等键)被技下时触发,如果一直按着某键,则会不断触发。当返回false时,取消默认动作
onkeypress键盘上的按键被按下,并产生一个字符时发生。也就是说,当按下Shift或Alt等键时不触发。如果一直按着某键,会不断触发。当返回false 时,取消默认动作
onkeyup释放键盘上的按键时触发
onload页面完全载入后,在window对象上触发;所有框架都载入后,在框架集上触发: 标记指定的图像完全载入后,在其上触发;或 标记指定的对象完全载入后,在其上触发
onmousedown单击任何一个鼠标按键时触发
onmousemove鼠标指针在某个元素上移动时持续触发
onmouseout将鼠标指针从指定的元素上移开时触发
onmouseover将鼠标指针移到某个元素上时触发
onmouseup释放任意一个鼠标按键时触发
onreset单击“重置”按钮时,在上触发
onresize窗口或框架的大小发生改变时触发
onscroll在任何带滚动条的元素或窗口上滚动时触发
onselect选中文本时触发
onsubmit单击“提交”按钮时,在上触发
onunload页面完全卸载后,在window对象上触发;或者所有框架都卸载后,在框架集上触发

 

document对象的应用

查看文档创建日期、修改日期和文档大小

查看文档创建日期、修改日期和文档大小,可以使用fileCreatedDate属性、fileModifiedDate属性、lastModified属性和fileSize属性来实现。

(1) fileCreatedDate 属性 fileCreatedDate属性用来获取文档的创建日期。

语法:

[date=]fileCreatedDate

参数说明:
date:可选项。字符串变量,用来存储文档的创建日期。

(2) fileModifiedDate 属性 fileModifiedDate属性用来获取文档最后修改的日期。

语法:

[date=]ileModifiedDate

(3) lastModified 属性 lastModified属性用来获取文档最后修改的时间。

语法:
[date=]lastModified
参数说明:
date:可选项。字符串变量,用来存储文档最后修改的时间。

(4) fileSize属性 fileSize属性用来获取文档的大小。

语法:

[size=]fileSize

参数说明:

size:可选项。字符串变量,用来存储文档大小

例子:查看文档创建日期、修改日期和文档大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>查看文件创建日期、修改日期和文档大小</p>
		<br />
		<script>
			document.write("<b>该文档创建日期:&nbsp;</b>"+document.fileCreatedDate+"<br />");
			document.write("<b>该文档修改日期:&nbsp;</b>"+document.fileModifiedDate+"<br />");
			document.write("<b>该文档修改时间:&nbsp;</b>"+document.lastModified+"<br />");
			document.write("<b>该文档大小:&nbsp;</b>"+document.fileSize+"<br />");
		</script>
	</body>
</html>

动态标题栏

设置动态标题栏可以使用title属性来实现。该属性用来获取或设置文档的标题。

语法:

[Title=]document.title[=setTitle]

参数说明:

Title:可选项,字符串变量,用来存储文档的标题

setTitle:可选项。用来设置文档的标题

例子:在浏览网页时,经常会看到一些IE浏览器中标题栏的信息不停地闪动或变换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p></p>
		<br />
		<script>
			var n=0;
			function title(){
				n++;
				if(n==4) n=1;
				if(n==1) document.title='(-.-)';
				if(n==2) document.title='(^.^)';
				if(n==3) document.title='(~.~)';
				setTimeout("title()",1000);
			}
			title();
		</script>
	</body>
</html>

获取并设置URL

获取并设置URL主要可以使用URL属性来实现。该属性用来获取或设置当前文档的URL。

语法:

[url=]document.URL[=setUrl]
参数说明:
url:可选项。字符串表达式,用来存储当前文档的URL。
setUrl:可选项。字符串变量,用来设置当前文档的URL。

例子:获取并设置URL


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>	
		<script>
			document.write("<b>当前页面的URL:&nbsp;</b>"+document.URL);
			function seturl(){
				document.URL=t;
				var u=document.URL;
				return u;
			}
			
		</script>
		<p>
            转入要跳转的页面URL:
			<input name="name" type="text" />
			<input name="input" value="跳转" onclick="seturl(name.value)" type="button" />
		</p>
			
	</body>
</html>

 

获取对象的当前状态

在文档中获取某个对象的当前状态可以使用readyState属性来实现。

语法:

[state=]obj.readyState

状态值及说明

状态栏说明
loading表示该对象正在载入数据
loaded表示该对象载入数据完成
interactive用户可以和该对象进行交互,不管对象是否已经加载完毕
complete该对象初始化完毕

例子:获取对象的当前状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>	
		<script>
			document.write("<br /><b>document对象当前状态:&nbsp;</b>"+document.readyState+"<br />");
		</script>
		
	</body>
</html>