第10章 DOM (二)

最新推荐文章于 2024-09-24 11:55:49 发布

blinkstar824

最新推荐文章于 2024-09-24 11:55:49 发布

阅读量600

点赞数

分类专栏： JavaScript高级程序设计文章标签：浏览器文档 javascript html domain safari

JavaScript高级程序设计专栏收录该内容

53 篇文章 0 订阅

订阅专栏

10.1.2 Document 类型

JavaScript 通过 Document 类型表示文档。在浏览器中，document 对象是 HTMLDocument (继承自 Document 类型) 的一个实例，表示整个 HTML 页面。而且，document 对象是 window 对象的一个属性，因此可以将其作为全局对象来访问。Document 节点具有下列特征：

Document 类型可以表示 HTML 页面或者其他基于 XML 的文档。不过，最常见的应用还是作为 HTMLDocument 实例的 document 对象。通过这个文档对象，不仅可以取得与页面有关的信息，而且还能操作页面的外观及其底层结构。

除了 IE 之外，可以在任何浏览器中通过脚本访问 Document 类型的构造函数和原型。但在所有浏览器中都可以访问 HTMLDocument 类型的构造函数和原型，包括 IE8 及后续版本。

1.文档的子节点

虽然 DOM 标准规定 Document 节点的子节点可以是 DocumentType、Element、ProcessingInstruction 或 Comment，但还有两个内置的访问其子节点快捷方式。第一个就是 documentElement 属性，该属性始终指向 HTML 页面中的 <html> 元素。另一个就是通过 childNodes 列表访问文档元素，但通过 documentElement 属性则能更快捷、更直接地访问该元素。以下面这个简单的页面为例：

<html>

<body>

</body>

</html>

这个页面在经过浏览器解析后，其文档中只包含一个子节点，即 <html> 元素。可以通过 documentElement 或 childNodes 列表来访问这个元素，如下所示：

var html = document.documentElement; // 取得对 <html> 的引用

alert(html == document.childNodes[0]); // true

alert(html == document.firstChild); // true

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

作为 HTMLDocument 的实例，document 对象还有一个 body 属性，直接指向 <body> 元素。因为开发人员经常要使用这个元素，所以 document.body 在 JavaScript 代码中出现的频率非常高，其用法如下：

var body = document.body; // 取得对 <body> 的引用

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

Document 另一个可能的子节点是 DocumentType 。通常将 <!DOCTYPE> 标签看成一个与文档其他部分不同的实体，可以通过 doctype 属性 (在浏览器中是 document.doctype) 来访问它的信息：

var doctype = document.doctype; // 取得对 <!DOCTYPE> 的引用

浏览器对 document.doctype 的支持差别很大，可以给出如下总结。

IE : 如果存在文档类型声明，会将其错误地解释为一个注释并把它当作 Comment 节点；而 document.doctype 的值始终为 null。
Firefox : 如果存在文档类型声明，则将其作为文档的第一个子节点；document.doctype 是一个 DocumentType 节点，也可以通过 document.firstChild 或 document.childNodes[0] 访问同一个节点。
Safari、Chrome 和 Opera : 如果存在文档类型声明，则将其解析，但不作为文档的子节点。document.doctype 是一个 DocumentType 节点，但该节点不会出现在 document.childNodes 中

由于浏览器对 document.doctype 的支持不一致，因此这个属性的用处很有限。

从技术上说，出现在 <html> 元素外部的注释应该算是文档的子节点。然而，不同的浏览器在是否解析这些注释以及能否正确处理它们等方面，也存在很大差异。以下面简单的 HTML 页面为例：

看起来这个页面应该有3个子节点：注释、<html>元素、注释。从逻辑上讲，我们会认为 document.childNodes 中应该包含与这3个节点对应的3项。但是，现实中的浏览器在处理位于 <html> 外部的注释方面存在如下差异。

IE、Safari 3.1 及更高版本、Opera 和 Chrome 只为第一条注释创建节点，不为第二条注释创建节点。结果，第一条注释就会成为 document.childNodes 中的第一个子节点。
Firefox 以及 Safari 3.1 之前的版本会完全忽略这两条注释。

同样，浏览器间的这种不一致性也导致了位于 <html> 元素外部的注释没有什么用处。

多数情况下，我们都用不着在 document 对象上调用 appendChild()、removeChild() 和 replaceChild() 方法，因为文档类型 (如果存在的话) 是只读的，而且它只能有一个元素子节点 (该节点通常早就已经存在了)。

2.文档信息

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

// 取得文档标题

var originalTitle = document.title;

// 设置文档标题

document.title = "New page title";

接下来要介绍的3个属性都与对网页的请求有关，它们是 URL 、domain 和 referrer 。 URL 属性中包含页面完整的 URL (即地址栏中显示的 URL)，domain 属性中只包含页面的域名，而 referrer 属性中则保存着链接到当前页面的那个页面的 URL 。在没有来源页面的情况下，referrer 属性中可能会包含空字符串。所有这些信息都存在于请求的 HTTP 头部，只不过是通过这些属性让我们能够在 JavaScript 中访问它们而已，如下面的例子所示：

// 取得完整的 URL

var url = document.URL ;

// 取得域名

var domain = document.domain;

// 取得来源页面的 URL

var referrer = document.referrer;

URL 与 domain 属性是相互关联的。例如，如果 document.URL 等于 http://www.wrox.com/WileyCDA/，那么 document.domain 就等于 www.wrox.com 。

在这3个属性中，只有 domain 是可以设置的。但由于安全方面的限制，也并非可以给 domain 设置任何值。如果 URL 中包含一个子域名，例如 p2p.wrox.com，那么就只能将domain 设置为 "wrox.com" (URL 中包含 "www" ，如 www.wrox.com 时，也是如此)。不能将这个属性设置为 URL 中不包含的域，如下面的例子所示：

// 假设页面来自 p2p.wrox.com 域

document.domain = "wrox.com"; // 成功

docuemnt.domain = "nczonline.net"; // 出错！

当页面中包含来自其他子域的框架或内嵌框架时，能够设置 document.domain 就非常方便了。由于跨域安全限制，来自不同子域的页面无法通过 JavaScript 通信。而通过将每个页面的 document.domain 设置为相同的值，这些页面就可以互相访问对方包含的 JavaScript 对象了。例如，假设有一个页面加载自 www.wrox.com，其中包含一个内嵌框架，框架内的页面加载自 p2p.wrox.com。由于 docuemnt.domain 字符串不一样，内外两个页面之间无法相互访问对方的 JavaScript 对象。但如果将这两个页面的 document.domain 值都设置为 "wrox.com"，它们之间就可以通信了。

浏览器对 domain 属性还有一个限制，即如果域名一开始是 "松散的" (loose)，那么不能将它再设置为 "紧绷的" (tight)。换句话说，在将 document.domain 设置为 "wrox.com" 之后，就不能再将其设置回 "p2p.wrox.com"，否则将会导致错误，如下面的例子所示：

// 假设页面来自于 p2p.wrox.com 域

document.domain = "wrox.com"; // 松散的 (成功)

document.domain = "p2p.wrox.com"; // 紧绷的 (出错！)

所有浏览器中都存在这个限制，但IE8是实现这一限制的最早的IE版本。

3.查找元素

说到最常用的 DOM 应用，恐怕就要数取得特定的某个或某组元素的引用，然后再执行一些操作了。取得元素的操作可以使用 document 对象的几个方法来完成。其中，Document 类型为此提供了两个方法：getElementById() 和 getElementsByTagName()。

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

可以使用下面的代码取得这个元素：

var div = document.getElementById("myDiv"); // 取得 <div>元素的引用

但是，下面的代码在除IE之外的所有浏览器中都将返回 null：

var div = document.getElementById("mydiv"); // 无效的ID (在IE中可以)

IE8及较低版本不区分ID的大小写，因此 "myDiv" 和 "mydiv" 会被当作相同的元素 ID 。运行在 IE7兼容模式下的IE8 (此时 document.documentMode 值为7) 也是如此。

如果页面中多个元素的ID值相同，getElementById()只返回文档中第一次出现的元素。IE7及较低版本还为此方法添加了一个有意思的“怪癖”：name 特性与给定ID匹配的表单元素 (<input>、<textarea>、<button>及<select>)也会被该方法返回。如果有哪个表单元素的 name 特性等于指定的ID，而且该元素在文档中位于带有给定ID的元素前面，那么IE就会返回那个表单元素。来看下面的例子：

基于这段HTML代码，在IE7中调用 document.getElementById("myElement")，结果会返回 <input>元素；而在其他所有浏览器中，都会返回对 <div> 元素的引用。为了避免IE中存在的这个问题，最好的办法是不让表单字段的name特性与其他元素的ID相同。

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

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

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

alert(images.length); // 输出图像的数量

alert(images[0].src); // 输出第一个图像元素的 src 特性

alert(images.item(0).src); // 输出第一个图像元素的 src 特性

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

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

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

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

var myImage = images["myImage"];

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

要想取得文档中的所有元素，可以向 getElementsByTagName()中传入 "*" 。在 JavaScript 及 CSS 中，星号 (*) 通常表示 “全部”。下面看一个例子：

var allElements = document.getElementsByTagName("*");

仅此一行代码返回的 HTMLCollection 中，就包含了整个页面中的所有元素 -- 按照它们出现的先后顺序。换句话说，第一项是 <html> 元素，第二项是 <head> 元素，以此类推。由于 IE 将注释 (Comment) 实现为元素 (Element)，因此在 IE 中调用 getElementsByTagName("*") 将会返回所有注释节点。

虽然标准规定标签名需要区分大小写，但为了最大限度地与既有HTML页面兼容，传给 getElementsByTagName() 的标签名是不需要区分大小写的。但对于 XML 页面而言 (包括 XHTML)，getElementsByTagName() 方法就会区分大小写。

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

如这个例子所示，其中所有单选按钮的 name 特性值都是 "color"，但它们的ID可以不同。ID的作用在于将 <label> 元素应用到每个单选按钮，而 name 特性则用以确保三个值中只有一个被发送给浏览器。这样，我们就可以使用如下代码取得所有单选按钮：

var radios = document.getElementsByName("color");

与 getElementsByTagName() 类似，getElementsByName() 方法也会返回一个 HTMLCollection 。但是，对于这里的单选按钮来说，namedItem() 方法则只会取得第一项 (因为每一项的 name 特性都相同)。

4.特殊集合

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

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

5.DOM一致性检测

由于 DOM 分为多个级别，也包含多个部分，因此检测浏览器实现了 DOM 的哪些部分就十分必要了。document.implementation 属性就是为此提供相应信息和功能的对象，与浏览器对 DOM 的实现直接对应。DOM1 级只为 document.implementation 规定了一个方法，即 hasFeature()。这个方法接受两个参数：要检测的 DOM 功能的名称及版本号。如果浏览器支持给定名称和版本的功能，则该方法返回 true ，如下面的例子所示：

var hasXmlDom = document.implementation.hasFeature("XML", "1.0");

下表列出了可以检测的不同的值及版本号。

尽管使用 hasFeature() 确实方便，但也有缺点。因为实现者可以自行决定是否与 DOM 规范的不同部分保持一致。事实上，要想让 hasFeature() 方法针对所有值都返回 true 很容易，但返回 true 有时候也不意味着实现与规范一致。例如，Safari 2.x 及更早版本会在没有完全实现某些 DOM 功能的情况下也返回 true 。为此，我们建议多数情况下，在使用 DOM 的某些特殊的功能之前，最好除了检测 hasFeature() 之外，还同时使用能力检测。

6.文档写入

有一个 document 对象的功能已经存在很多年了，那就是将输出流写入到网页中的能力。这个能力体现在下列4个方法中： write()、writeln()、open() 和 close() 。其中，write() 和 writeln() 方法都接受一个字符串参数，即要写入到输出流中的文本。write() 会原样写入，而 writeln() 则会在字符串的末尾添加一个换行符 (\n)。在页面被加载的过程中，可以使用这两个方法向页面中动态地加入内容，如下面的例子所示：