JavaScript DOM入门之 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 对象。通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。

文档的子节点

通过 documentElement 或 childNodes 列表来访问 html 元素

var html = document.documentElement;      // 取得对的引用
console.log(html === document.childNodes[0]);   // true
console.log(html === document.firstChild);      // true

这个例子说明， documentElement 、 firstChild 和 childNodes[0] 的值相同，都指向 <html> 元素。

所有浏览器都支持 document.documentElement 和 document.body 属性。

浏览器对 document.doctype 的支持不一致，这个属性的用处很有限，此处不再做说明。

文档信息

作为 HTMLDocument 的一个实例， document 对象还有一些标准的 Document 对象所没有的属性。这些属性提供了 document 对象所表现的网页的一些信息。其中第一个属性就是 title，包含着 <title> 元素中的文本——显示在浏览器窗口的标题栏或标签页上。通过这个属性可以取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中。

// 取得文档标题
var originalTitle = document.title;

// 设置文档标题
document.title = "New page title";

URL 属性中包含页面完整的 URL（即地址栏中显示的URL）
domain 属性中只包含页面的域名
referrer 属性中则保存着链接到当前页面的那个页面的 URL。

在没有来源页面的情况下， referrer 属性中可能会包含空字符串。所有这些信息都存在于请求的 HTTP 头部，只不过是通过这些属性让我们能够在 JavaScrip 中访问它们。

这3个属性中，只有 domain 是可以设置的。不能将这个属性设置为URL中不包含的域，如下面的例子所示：

// 假设页面来自 p2p.wrox.com 域
document.domain = "wrox.com";       // 成功
document.domain = "nczonline.net";  // 失败

由于跨域安全限制，来自不同的子域的页面无法通过 javascript 通信。而通过将每个页面的 document.domain 设置为相同的值，这些页面就可以相互访问包含的javascript对象了。

两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共享 Cookie。

举例来说，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那么只要设置相同的document.domain = "example.com" ;，两个网页就可以共享Cookie。

浏览器对domain属性还有一个限制，即如果域名一开始是"松散的"(loose)，那么不能将它再设置为"紧绷的"(tight)。

// 假设页面来自 p2p.wrox.com 域
document.domain = "wrox.com";       // 松散的 (成功)
document.domain = "p2p.wrox.com";   // 紧绷的 (出错)

查找元素

getElementById()，接收一个参数：要取得的元素的 ID。如果找到相应的元素则返回该元素，如果不存在带有相应 ID 的元素，则返回 null。注意，这里的 ID 必须与页面中元素的 id 特性（attribute）严格匹配，包括大小写。

IE8 及较低版本不区分 ID 的大小写
如果页面中多个元素的ID值相同，getElementById() 只返回文档中第一次出现的元素。
表单元素的 name 特性若等于指定的 ID ，且该元素在文档中位于带有给定 ID 的元素前面，IE7及较低版本会返回那个表单元素
不要让表单字段的 name 特性与其他元素的 ID 相同

getElementsByTagName() 。这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的 NodeList 。在HTML文档中，这个方法会返回一个 HTMLCollection 对象，作为一个“动态”集合，该对象与 NodeList 非常类似。例如，下列代码会取得页面中所有的 <img> 元素，并返回一个 HTMLCollection 。

var images = document.getElementsByTagName("img");

这行代码会将一个 HTMLCollection 对象保存在 images 变量中。与 NodeList 对象类似，可以使用方括号语法或 item() 方法来访问 HTMLCollection 对象中的项。而这个对象中元素的数量则可以通过其 length 属性取得，如下面的例子所示。

console.log(images.length);        // 输出图像的数量
console.log(images[0].src);        // 输出第一个图像元素的src特性
console.log(images.item(0).src);   // 输出第一个图像元素的src特性

HTMLCollection 对象还有一个方法，叫做 namedItem()，使用这个方法可以通过元素的 name 特性取得集合中的项。例如，假设上面提到的页面中包含如下元素：

<img src="myimage.gif" name="myImage">

那么就可以通过如下方式从 images 变量中取得这个 <img>元素：

var myImage = images.namedItem("myImage");

在提供按索引访问项的基础上，HTMLCollection 还支持按名称访问项，这就为我们取得实际想要的元素提供了便利。而且，对命名的项也可以使用方括号语法来访问，如下所示：

var myImage = images["myImage"];

对 HTMLCollection 而言，我们可以向方括号中传入数值或字符串形式的索引值。在后台，对数值索引就会调用 item()，而对字符串索引就会调用 namedItem()。

要想取得文档中的所有元素，可以向 getElementsByTagName() 中传入 "*"。

在 JavaScript 及 CSS 中，星号（*）通常表示“全部”。

getElementsByName()，只有 HTMLDocument 类型才有。这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName() 方法的情况是取得单选按钮；为了确保发送给浏览器的值正确无误，所有单选按钮必须具有相同的 name 特性

特殊集合

除了属性和方法，document 对象还有一些特殊的集合。这些集合都是 HTMLCollection 对象，为访问文档常用的部分提供了快捷方式，包括：

document.anchors，包含文档中所有带 name 特性的元素；
document.applets，包含文档中所有的元素，因为不再推荐使用元素，所以这个集合已经不建议使用了；
document.forms，包含文档中所有的元素，与document.getElementsByTagName("form")得到的结果相同；
document.images，包含文档中所有的元素，与document.getElementsByTagName("img")得到的结果相同；
document.links，包含文档中所有带href特性的元素。

这个特殊集合始终都可以通过 HTMLDocument 对象访问到，而且，与 HTMLCollection 对象类似，集合中的项也会随着当前文档内容的更新而更新。

文档写入

将输出流写入到网页中：write()、writeln()、open() 和 close()。其中，write() 和 writeln() 方法都接受一个字符串参数，即要写入到输出流中的文本。write() 会原样写入，而 writeln() 则会在字符串的末尾添加一个换行符 \n。在页面被加载的过程中，可以使用这两个方法向页面中动态地加入内容。

还可以使用 write() 和 writeln() 方法动态地包含外部资源，例如 JavaScript 文件等。

如果在文档加载结束后再调用 document.write() , 那么输出的内容将会重写整个页面。

方法 open() 和 close() 分别用于打开和关闭网页的输出流。如果是在页面加载期间使用 write() 或 writeln() 方法，则不需要用到这两个方法。

JavaScript DOM入门之 Document 类型

猜你喜欢