目录

文档对象概述

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

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 超链接文字的颜色,对应于<body>标记中的alink属性
all[ ] 存储HTML标记的一个数组(该属性本身也是一个对象)
anchors[ ] 存储锚点的一个数组(该属性本身也是一个对象)
bgColor 文档的背景颜色
cookie 表示cookie的值
fgColor 文明的文本颜色(不包含超链接的文字)对应于<body>标记中的text属性
forms[ ] 存储窗体对象的一个数组(该属性本身也是一个对象)
fileCreateDate 创建文档的日期
fileModifiedDate 文档的最后修改日期
fileSize 当前文件的大小
lastModified 文档的最后修改时间
images[ ] 存储图像对象的一个数组(该属性本身也是一个对象)
linkColor 未被访问的超链接文字的颜色,对应<body>标记中的link属性
links[ ] 存储link对象的一个数组(该属性本身也是一个对象)
vlinkColor 表示已访问的超链接文字的颜色,对应于<body>标记的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对象上触发;所有框架都载入后,在框架集上触发: <img>标记指定的图像完全载入后,在其上触发;或<object> 标记指定的对象完全载入后,在其上触发
onmousedown 单击任何一个鼠标按键时触发
onmousemove 鼠标指针在某个元素上移动时持续触发
onmouseout 将鼠标指针从指定的元素上移开时触发
onmouseover 将鼠标指针移到某个元素上时触发
onmouseup 释放任意一个鼠标按键时触发
onreset 单击“重置”按钮时,在<form>上触发
onresize 窗口或框架的大小发生改变时触发
onscroll 在任何带滚动条的元素或窗口上滚动时触发
onselect 选中文本时触发
onsubmit 单击“提交”按钮时,在<fom>上触发
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>