Document类型
JS通过Document类型表示文档。在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。其中,document对象是window对象的一个属性,因此可以将其作为全局对象来访问,Document节点具有以下特征:
- nodeType的值为9;
- nodeName的值为“#document”;
- nodeValue的值为null;
- parentNode的值为null;
- ownerDocument的值为null;
- 其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment。
Document类型可以表示HTML页面或者其他基于XML的文档。不过,最常见的应用还是作为HTMLDocument实例的document对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构。
文档的子节点
虽然DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment,但还有两个内置的访问其子节点的快捷方式。第一个就是DocumentElement属性,该属性始终指向HTML页面中的<html>
元素。另一个就是通过ChildNodes列表访问文档元素。
作为HTMLDocument的实例,document对象还有一个body属性,直接指向<body>
元素。
所有浏览器都支持document.documentElement和document.body属性。
文档信息
作为HTMLDocument的一个实例,document对象还有一些标准的Document对象所没有的属性。例如:
// 取得文档标题
var originalTitle = document.title;
// 设置文档标题
document.title = "New page title";
// 取得完整的URL
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得来源页面的URL
var referrer = document.referrer;
// 假设页面来自p2p.wrox.com域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 出错
查找元素
Document类型提供了两个方法。
1,getElementById(),接收一个参数:要取得元素的ID,找到则返回该元素,不存在则返回null。注意,这里的ID必须与页面中元素的id严格匹配,包括大小写。
2,getElementsByTagName(),接收一个参数:要取得元素的标签名,而返回的是包含零或多个元素的NodeList。
只有HTMLDocument类型才有的方法:getElementsByName(),返回带有给定name特性的所有元素。
特殊集合
- document.anchors,包含文档中所有带name特性的
<a>
元素。 - document.applets,包含文档中所有的
<applet>
元素,因为不再推荐使用<applet>
元素,所以这个集合已经不建议使用了。 - document.forms,包含文档中所有的
<form>
元素,与document.getElementsByTagName(‘form’)得到的结果相同。 - document.images,包含文档中所有的
<img>
元素,与document.getElementsByTagName(‘img’)得到的结果相同。 - document.links,包含文档中所有带href特性的
<a>
元素。
DOM一致性检测
由于DOM分为多个级别,也包含多个部分,因此检测浏览器实现了DOM的哪些部分就十分必要。document.implementation属性就是这些提供相应信息和功能的对象。与浏览器对DOM的实现直接对应。、DOM1级只为document.implementation规定了一个方法,即hasFeature()。这个方法接受两个参数:要检测的DOM功能的名称及版本号。如果浏览器支持给定名称和版本的功能,则该方法返回true。
下表列出了可以检测的不同的值及版本号:
文档写入
- write();
- writeIn();
- open();
- close();
write()和writeIn()接受一个字符串参数,既要写入到输出流的文本。write()会原样写入,而writeIn()则会在字符串的末尾添加一个换行符(\n)。
open()和close()分别用于打开和关闭网页的输出流。