零基础学JavaScript文档对象

1、第12章 文档对象 Document对象，又称为文档对象，该对象JavaScript中的最重要的一个对象。Document对象是Window对象中的一个子对象，Window对象代表浏览器窗口，而Document对象代表了浏览器窗口中的文档。12.1 文档对象 Document对象是代表一个浏览器窗口或框架中的显示HTML文件的对象。JavaScript会为每个HTML文档自动创建一个Document对象。通过Document对象可以操作HTML文档中的内容及其他对象。 Document对象是JavaScript中使用得最多的对象，因为Document对象可以操作HTML文档的内容和对象。Doc

2、ument对象除了拥有大量的方法和属性之外，还拥有大量的子对象，这些子对象可以用来控制HTML文档中的图片、超链接、表单元素等控件。 Document对象拥有大量的属性，这些属性主要用于描述HTML文档中的标题、颜色、URL以及HTML文档中的图片、超链接、表单元素等。（具体内容请参照书。） Document对象中包含了一些用来处理文档内容的方法，（具体内容请参照书。） 在一个HTML文档中，可能会出现很多种元素，（具体内容请参照书。）12.2 文档对象的应用 Document对象的属性和方法比较多，下面通过一些例子来介绍这些属性和方法。 在默认情况下，未访问过的超链接为蓝色、已访问过的超链接

3、和正在访问的超链接为暗红色。使用Document对象的linkColor属性、vlinkColor属性和alinkColor属性可以分别设置文档中的未访问过的超链接的颜色、已访问过的超链接的颜色和正在访问的超链接的颜色。（具体内容请参照书。） 在HTML中的body元素中，可以通过bgcolor属性和text属性来设置网页背景颜色和默认的文字颜色。而Document对象的bgColor属性和fgColor属性也可以设置网页背景颜色和默认的文字颜色。在body元素中设置了bgcolor属性和text属性之后，HTML本身是不能修改这些属性值的，但是可以通过Document对象的bgColor属性

4、和fgColor属性来修改。（具体内容请参照书。） Document对象中的lastModified、title和URL属性可以显示文档的信息。在HTML文件的最下方输出这些信息，可以方便用户查看文档是否已经更新，也可以根据这些信息来确定是否需要重新打印文档。（具体内容请参照书。） 将Document对象的title属性与Window对象的setInterval()方法相结合，可以让在浏览器窗口显示动态标题。（具体内容请参照书。） 所谓盗链，就是超链接的目标网页并不是放在自己的服务器上，而是放在别人服务器上的一种行为。盗链现象通常发生在小网站中，这些小网站将一些有实力的大网站中的好文章、好图片

5、或者是音乐、软件的下载地址（URL）放在自己的网站中，以此来吸引浏览者，提高自己网站的访问量。这种做法可以在不增加成本的情况下扩充自己网站的内容，也会增加资源网站的服务器负担。这对于资源网站来说，是不公平的。使用Document对象的URL属性和referrer属性就可以防止盗链行为。（具体内容请参照书。） 使用Document对象的write()方法和writeln()方法除了可以在当前文档中输出内容之外，还可以在其他浏览器窗口的文档中输出内容。在介绍如何在其他文档中输出内容之前，先介绍Document对象中的另外两个方法： document.open() document.close()

6、使用open()方法可以打开一个文档流，在默认情况下将会打开一个新的HTML文档。如果要想打开的不是HTML文档，就要给open()方法传递一个参数。（具体内容请参照书。） IE浏览器为Document对象扩展了一个all属性，该属性可以返回一个数组，数组中的元素为HTML文档中的所有HTML元素。（具体内容请参照书。） Document对象的all属性返回值为包含文档中所有HTML标签的数组，对all数组中的元素的引用方法有以下三种： document.alli document.allname 在IE浏览器中，Document对象的all属性可以返回整个HTML文档中的所有HTML元素，而

7、在现实运用中，很少有需要获得所有元素的情况，通常需要获得某个元素下的子元素。为此IE浏览器又扩展了一个children属性，该属性用来返回一个文档中的某个元素的所有子元素。（具体内容请参照书。） 在IE浏览器中除了可以使用Document对象中的lastModified、title和URL属性来显示文档信息之外，还可以使用以下三种属性来显示其他文档信息： document.charset document.defaultCharset document.readyState（具体内容请参照书。）12.3 图像对象 Document对象的images属性的返回值是一个数组，数组中的每一个元素都是

8、一个Image对象。在本节里将会介绍Image对象的属性、事件以及使用方法。 Image对象，又称为图像对象。在HTML文档里，有可能会存在多张图片，JavaScript在加载HTML文档时，就会自动创建一个images数组，数组中的元素个数由HTML文档中的标签决定。JavaScript为每一个标签在images数组中创建一个元素。因此，images数组的每一个元素都代表着HTML文档中的一张图片，通过对images数组元素的引用，可以达到引用图片的目的。 Image对象与其他对象类似，也拥有属于自己的属性，这些属性主要用于描述图片的高度、宽度、边框、地址等信息。（具体内容请参照书。） Im

9、age对象没有可以使用的方法，但是Image对象支持abort、error等事件，这些事件是大多数其他对象都不支持的。（具体内容请参照书。） Image对象的属性大多都可以用来获取图片的信息，而图片的这些信息是在标签中指定。（具体内容请参照书。） Image对象中的大多数属性都是只读属性，但其中的src属性却是一个可读写的属性，通过改变Image对象中的src属性值，可以改变置换图片。（具体内容请参照书。） 产生一个随机图片的原理与置换图片的原理类似，在产生随图图片之前先产生一个随机数，再根据随机数来显示一张图片。下面的例子可以在网页上循环地显示图片，并且图片显示是无规律的。这种方式常用在网页

10、的广告中，使用户在浏览网页时随机显示图片广告。 使用Image对象的width属性和height属性可以动态改变图片的大小。（具体内容请参照书。） 在随机图片的例子中，使用了setInterval()方法每隔1秒钟显示一张图片。事实上，如果这个文件放在网络上，并且在图片比较大、网络比较慢的情况下，有可能会出现图片不能显示的问题。可以使用缓存图片的技术，先将图片下载回来，放在缓存中。等到要加载图片时，再从缓存中直接加载到浏览器中，这样就不用再去网络上下载图片了。（具体内容请参照书。） Image对象的load事件是在图片加载完毕后激发的事件。在上个例子中，每隔1秒钟就会显示一个随机的图片，如果正

11、在显示的图片还没有下载到缓存中时，该图片还是会无法完全显示。针对这种情况，可以为每个图片都添加一个load事件，统计要随机显示的图片是否都已经下载到缓存中了。只有所有图片都下载完毕之后，才开始随机显示图片，否则不显示图片。（具体内容请参照书。） 在加载图片产生错误（如加载的图片不存在）时，会激发error事件。利用error事件与Image对象相结合，可以在图片加载出错时显示一张默认的图片，这样在网页上永远都不会有图片不能显示时出现的小叉。（具体内容请参照书。）12.4 链接对象 Document对象的links属性可以返回一个数组，该数组中的每一个元素都是一个Link对象，也称为链接对象。在

12、一个HTML文档中，可能会存在多个超链接，JavaScript在加载HTML文档时，就会自动创建一个links数组，数组中的元素个数由HTML文档中的标签和标签个数所决定。JavaScript会将每一个超链接都以Link对象的形式存放在link数组中，link数组中的每一个元素所代表的就是HTML文档中的每一个超链接，可以使用以下方法来引用links数组中的元素。 document.linksi Link对象引用的是文档中的超链接，包括标签、标签以及这两个标签之间的文字。由于超链接元素的href属性值为文件URL，因此Link对象的大多数属性与Location对象的属性相同。 Link对象可以

13、支持的事件与Image对象可以支持的事件大致相同。（具体内容请参照书。） 使用Link对象可以查看一个网页上有哪些超链接，并且可以设置这些超链接的属性。（具体内容请参照书。） 使用Link对象可以完成翻页功能。当一个网页的内容很多有可能就需要分为多页显示。也有可能是因为其他需要，几个网页具有连续性，因此需要通过“上一页”、“下一页”等链接联系到一起，这就是翻页功能。（具体内容请参照书。） 使用Link对象，不但可以查看一个网页中的所有超链接，还可以通过与Window对象相结合，根据网页中的超链接一直追踪到其他网页的超链接，这样，可以看到一个网站的所有超链接地址。12.5 锚对象 Documen

14、t对象的anchors属性可以返回一个数组，该数组中的每一个元素都是一个Anchors对象，也称为锚对象。只有在标签中设置name属性，才可以创建一个锚。在加载HTML文档时，JavaScript就会自动创建一个anchors 数组，数组中的元素个数由HTML文档中锚个数所决定。JavaScript会将每一个锚都以Anchors对象的形式存放在anchors数组中。anchors数组中的每一个元素所代表的就是HTML文档中的每一个锚，可以使用以下方法来引用anchors数组中的元素。 document.anchorsi Anchor对象是一个比较简单的对象，该对象所拥有的属性不多。Anchor对象的属性如（具体内容请参照书。） 锚对象与链接对象都是由标签所创建的，但并不是每个标签都能创建Link对象或Anchor对象。如果要创建Link对象，标签中必须要有href属性；如果要创建Anchor对象，标签中必须要有name属性。如果标签中即有href属性又有name属性，那么将同时创建Link对象和Anchor对象。 锚通常都在一个内容比较多的网页中使用。当网页内容比较多的时候，可以在网页的不同位置设置不同的锚，通过对锚的引用让用户直接跳转到锚所在位置。使用Anchor对象，可以很方便的