W3C HTML5标准阅读笔记 - document对象

标准原文:http://www.w3.org/TR/html5/dom.html#documents

浏览器加载HTML/XHTML文档后,文档对象在DOM中以document对象的形式而存在。HTML标准文档对部分document对象的属性进行了描述。

document.referrer

访问document对象的referrer字段将返回用户跳转至当前页面之前所访问的那张页面的地址,也即能从referrer字段获知用户是从哪张页面跳转到当前页面的。如果当前页面是直接在浏览器里打开的,则referrer字段返回空字符串。

当用户从一张页面跳转到另一张页面时,访问第二张页面的第一次HTTP请求(对第二张页面的主HTML文件的请求),其请求头中会出现Referer字段,该字段表示第一张页面的URL,其值与第二张页面中document对象的referrer字段相同 -- 个人猜测:浏览器是从该Referer请求头中获知跳转来源,并将其组装到document对象中的。有几个细节值得注意:

  • HTTP请求头中的字段名称为”Referer”,而document对象中的字段名称为”referrer”,两者并不相同。
  • 在HTTP的请求头中,如果页面是直接打开的,没有跳转来源,那么HTTP请求头中的Referer字段就不存在。
  • 如果某张页面中引用了另一个资源(比如外部的CSS文件),那么浏览器在发送HTTP请求获取该外部资源时,HTTP请求头中的Referer字段值为该页面自身的URL(外部资源的引用来源)。比如,浏览器直接打开页面X.html,而后从X.html页面上的某个链接跳转到Y.html页面,而Y.html页面上引用了一个外部的C.css文件,对于这三个HTTP请求来说,请求头中Referer字段的情况是这样的:
    X.html Y.html C.css
    不存在 X.html Y.html
  • 如果跳转来源页面是https的,而跳转后的当前页面是http的,此时浏览器一般会出于安全原因而丢弃Referer信息。
  • 如果跳转来源页面中用于跳转的a标签,其链接类型为noreferrer (<a rel="noreferrer" href="a.html">AAA</a>),此时浏览器在访问跳转后的页面时也会丢弃Referer信息。

document.cookie

访问document对象的cookie字段将返回当前文档中可用的cookie信息,如果当前文档无可用cookie,则返回空字符串。个人猜测:浏览器会在加载HTML文档后读取本地的cookie信息,并将其组装到document对象中。

如果对document.cookie进行赋值,则将在浏览器中添加有效期为“session”的cookie(浏览器进程关闭后即丢失),而已有的cookie并不会被删除。如果这种赋值操作的cookie有多个,则浏览器只会添加第一个cookie。如以下代码执行后浏览器中将添加值为42的cookie “aaa”,而bbb则会被丢弃:document.cookie = 'aaa=42;bbb=43;'

cookie存在一个叫做path的属性,当前文档所能访问到的cookie是受该path属性限制的。但一般而言,path属性只被用来定义、管理cookie的应用范围,不应当将其应用于cookie的安全管理上。

document.lastModified

访问document对象的lastModified字段将返回当前文档的最后修改时间。该信息是浏览器从HTTP Response头中的Last-Modified字段中获取,并转换成浏览器本地时区的时间后,赋值给lastModified的,其格式为:“MM/DD/YYYY hh:mm:ss”。比如,Response头中的Last-Modified字段值为:Last-Modified:Wed, 22 Jan 2014 10:52:10 GMT,则在中国GMT+8时区打开该网页时的document.lastModified值为“01/22/2014 18:52:10”。

如果Response头中Last-Modified字段缺失,则document.lastModified返回浏览器当前时间。

document.readyState

访问document对象的readyState字段将返回当前文档的状态:

  • 如果文档本身正在加载,则返回“loading”
  • 如果文档加载并解析成功,但其所引用的其它资源(比如图片)仍在加载,则返回“interactive”
  • 如果文档及其引用资源全部加载完毕,则返回“complete”

当document.readyState的值发生改变时,document对象将触发readystatechange事件。

document.head

访问document对象的head字段将返回页面中的head元素。

document.title

访问document对象的title字段将返回页面中title元素内的字符串(也即页面的名称)。可以通过给document.title赋值来实时更改页面名称,不过有一个特殊情况需要注意:如果文档中没有head元素,则该赋值无效。

document.body

返回body元素。可以对其进行赋值,从而替代当前的页面内容。如,可以用以下语句来清空页面:document.body = document.createElement('body');

当对document.body进行赋值时,新的值必须为body元素或者frameset元素,否则浏览器将抛出HierarchyRequestError异常。

其它

  • document.images将以HTMLCollection对象的形式返回文档中所有的img元素
  • document.links将以HTMLCollection对象的形式返回文档中所有具有href属性的a元素和area元素
  • document.forms将以HTMLCollection对象的形式返回文档中所有的form元素
  • document.scripts将以HTMLCollection对象的形式返回文档中所有的script元素
  • 调用document.getElementsByName(…)将以NodeList对象的形式返回文档中所有具有相应name属性的元素
  • 调用document.getElementsByTagName(…)将以HTMLCollection对象的形式返回文档中所有指定标签的元素。值得注意的是,无论getElementsByName还是getElementsByTagName,其所接受的name参数都是大小写敏感的

p.s. 上述HTMLCollection对象和NodeList对象都是“实时对象”(live),也即用上述方法获取对象后,如果DOM发生改变,则该对象中的内容将实时反映DOM改变后的结果。

Chuan Shao

Read more posts by this author.

Shanghai

Subscribe to Chuan's blog

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!