Javascript高级编程学习笔记（36）—

Documet类型

了解了基础的Node类型过后，我们来聊聊Node中的Document类型

我们知道所有的节点都继承自Node类型

所以除了Node类型公有的方法和类型之外，Document类型还有一些自己的特性

JS通过Document类型来表示文档

在浏览器中 document 对象是 HTMLDocument 的一个实例（继承自Document类型）

表示整个 HTML 页面，且 document 对象是 window 对象的一个属性所以可以作为全局对象访问

具有以下特征：

1、nodeName：#document

2、nodeValue：null

3、parentNode：null

4、nodeType：9

5、ownerDocument：null

文档的子节点

DOM标准规定 Document 节点的子节点可以是

1、DocumentType（文档类型声明）

2、Element

3、ProcessingInstruction

4、Comment

通过documentElement属性可以更快地访问 document 的子节点

该属性始终指向页面中的<html>

也可以通过 childNodes 来访问页面中的<html>

但是有些时候在 html 之前可能会有注释节点

所以如果需要访问 <html> 最好还是使用 document.documentElement 来访问

JS中document 还有个 body 属性用于访问 <body> 节点

doctype 属性用于访问 <!DOCTYPE html> 也就是文档类型声明，但是不同浏览器在该属性上的差异较大，所以不推荐使用

具体差异在：

1、IE8以下始终为null，会将其解析为注释节点

2、IE8以上若存在，会将其作为document 的第一个子节点

3、在非IE浏览器中，该属性会正确指向文档声明，但是不会出现在 childNodes 中

关于注释节点，不同浏览器的解析也存在着较大的差异

所以 <html> 外部的注释节点作用极为有限

文档信息

document 作为 HTMLDocument 的实例，document 对象还有一些标准的 Document 对象所没有的属性

1、title 指向页面中的 <title> 内容，通过修改该值可以修改页面的标题

2、URL 包含页面完整的 URL地址（即显示在地址栏中的内容）

3、domain 页面的域名

4、referrer 来源url 通常为空，只有重定向的页面有该值

后面三个属性中只有 domain 可以设置值，但是只能设置为 URL 中包含的域名，也就是子域名

并且还有一个限制，一旦将其设置为子域名就不能再设回父域名，也就是只能设置为当前domain的子域名

查找元素

Dom操作中最基础，也是最重要的功能就是查找元素了

该操作可以通过 document 对象的几个方法来完成

Document提供的方法：

1、getElementById（） // 传入元素ID，返回第一次匹配的元素，IE8以下不区分ID的大小写，IE7以下有个bug 若在 ID元素的前面，有个表单元素的name与ID一致则会返回这个表单元素

2、getElementsByTagName（） // 传入标签名，返回一个包含（0或多个元素的）NodeList，在HTML文档中会返回一个 HTMLCollection 对象，可以传入 * 以获取全部元素，html不区分大小写，XML区分

PS、HTMLCollection 和 NodeList 类似，也是一个“动态” 的集合，该集合提供两个方法用以访问其中的元素

　　1、item（）传入元素索引

　　2、namedItem（）通过元素的name特性进行索引

并且如果对 HTMLCollection 使用方括号的方式进行访问，在后台仍旧调用的是 item 方法

还有一点需要注意，IE在实现上将注释节点实现为元素，所以在使用* 获取所有元素时也会获取到注释节点

HTMLDocument提供的方法：

getElementsByName （）查找具有特定name的元素

与getElementByTagName 类似该方法返回一个 HTMLCollection

不过对于结果调用 namedItem 只会返回第一个，因为所有结果的name都是一样的

特殊集合

document 对象还有一些特殊集合，为访问文档的常用部分提供了便利

这些集合都是 HTMLCollection

document.anchors 所有有name的a标签的集合

document.forms 文档中的所有 <form>

document.images 文档中所有的<img>

document.links 文档中所有有href属性的a标签

DOM一致性检测

由于DOM分为多个级别，所以检测浏览器具体实现了哪些就是一个十分必要的过程

document.implementation属性为此提供了相应的功能和对象

DOM1中只为其提供了一个方法 hasFeature

该方法需要两个参数，第一个是需要检测的功能，第二个参数是该功能的版本号，两个参数都为字符串串形式

可以检测的功能有以下值：

1.Core // 基本DOM

2.XML // Core的XML拓展

3.HTML // XML对HTML的拓展

4.Views // 样式的文档格式化

5.StyleSheets // 将样式表关联到文档

6.CSS // 对层叠样式表1级的支持

7.CSS2 // 对层叠样式表2级支持

8.Events // 常规DOM事件

9.UEvents // 用户界面事件

10.MouseEvents // 鼠标事件

11.MutationEvents // DOM树变化时的事件

12.HTMLEvents // HTML4.01的事件

13.Range // 对范围操作的支持

14.Traversal // 遍历DOM树的方法

15.LS // 文件与DOM树的同步加载与保存

16.LS-Async // 文件与DOM树之间的异步加载与保存

17.Validation // 确保有效的前提下修改DOM树的方法

PS.由于这里的属性值，由浏览器厂商设置，所以很可能不准确，所以需要能力检测与之配合使用

文档写入

document 对象还有一个十分重要的功能，那就是将输出流写入到网页中的能力

提供了4个方法：

1、write 接收一个字符串，将其原样写入到网页中

2、writeln 接收一个字符串，将字符串末尾添加 \n 换行后写入页面

3、open 打开网页输出流

4、close 关闭网页输出流

如果页面加载完成，那么输出的内容将会重写整个页面