HTML DOM Document 对象

Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Document 对象集合

集合	描述
all[]	提供对文档中所有 HTML 元素的访问。
anchors[]	返回对文档中所有 Anchor 对象的引用。
applets	返回对文档中所有 Applet 对象的引用。
forms[]	返回对文档中所有 Form 对象引用。
images[]	返回对文档中所有 Image 对象引用。
links[]	返回对文档中所有 Area 和 Link 对象引用。

定义和用法
all 集合返回对文档中所有 HTML 元素的引用。
语法

document.all[i]
document.all[name]
document.all.tags[tagname]

说明
all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。
all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。
all[] 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。然而，更为常见的是使用 all[] 数组，根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。

定义和用法
anchors 集合可返回对文档中所有 Anchor 对象的引用。
语法
document.anchors[]
实例

<html>

<body>
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />

Number of anchors in this document:
<script type="text/javascript">
document.write(document.anchors.length)
</script>
</body>

</html>

返回文档中锚的数目

<html>
<body>

<a name="first">第一个锚</a><br />
<a name="second">第二个锚</a><br />
<a name="third">第三个锚</a><br />
<br />

文档中锚的数目：
<script type="text/javascript">
document.write(document.anchors.length)
</script>

</body>
</html>

返回文档中第一个锚的 innerHTML

<html>
<body>

<a name="first">第一个锚</a><br />
<a name="second">第二个锚</a><br />
<a name="third">第三个锚</a><br />
<br />

本文档中第一个锚的 InnerHTML 是：
<script type="text/javascript">
document.write(document.anchors[0].innerHTML)
</script>

</body>
</html>

定义和用法
forms 集合可返回对文档中所有 Form 对象的引用。
语法
document.forms[]
实例

<html>
<body>

<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>

<script type="text/javascript">
document.write("This document contains: ")
document.write(document.forms.length + " forms.")
</script>

</body>
</html>

计算文档中表单的数目

<html>
<body>

<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>

<script type="text/javascript">
document.write("文档包含： " + document.forms.length + " 个表单。")
</script>

</body>
</html>

访问集合中的项目

<html>
<body>
<form id="Form1" name="Form1">
您的姓名：<input type="text">
</form>
<form id="Form2" name="Form2">
您的汽车：<input type="text">
</form>

<p>
要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称：
</p>

<script type="text/javascript">
document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>")
document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>")
</script>

</body>
</html>

定义和用法
images 集合可返回对文档中所有 Image 对象的引用。
语法
document.images[]
提示和注释
注释：为了与 0 级 DOM 兼容，该集合不包括由 <object> 标记定义的图像。
实例

<html>

<body>
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">
<br /><br />

<script type="text/javascript">
document.write("This document contains: ")
document.write(document.images.length + " images.")
</script>
</body>

</html>

计算文档中的图像数目

<html>
<body>
<img border="0" src="/i/eg_smile.gif" />
<br />
<img border="0" src="/i/eg_mouse.jpg" />
<br /><br />

<script type="text/javascript">
document.write("本文档包含：" + document.images.length + " 幅图像。")
</script>

</body>
</html>

定义和用法
links 集合可返回对文档中所有 Area 和 Link 对象的引用。
语法
document.links[]
实例

<html>
<body>

<img src="planets.gif" 
width="145" height="126" 
usemap="#planetmap" />

<map name="planetmap">
<area id="venus" shape="circle" 
coords="124,58,8" 
alt="Venus"
href="venus.htm" />
</map>
<br />

Number of links in this document:
<script type="text/javascript">
document.write(document.links.length)
</script>

</body>
</html>

返回文档中链接的数目

<html>
<body>

<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />

<area shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />

</map>
<br />

文档中链接数目是：
<script type="text/javascript">
document.write(document.links.length)
</script>

</body>
</html>

返回文档中第一个链接的 id

<html>
<body>

<img id="planets"
src="/i/eg_planets.jpg" 
usemap="#planetmap" />

<map name="planetmap">
<area id="venus" shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
</map>
<br />

area 元素的 id 是：
<script type="text/javascript">
document.write(document.links[0].id)
</script>

</body>
</html>

Document 对象属性

属性	描述
body	
提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的所有 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后修改的日期和时间。
referrer	返回载入当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

定义和用法
cookie 属性可设置或查询与当前文档相关的所有 cookie。
语法
document.cookie
说明
该属性是一个可读可写的字符串，可使用该属性对当前文档的 cookie 进行读取、创建、修改和删除操作。
提示和注释
提示：该属性的行为与普通的读/写属性是不同的。
实例

<html>
<body>

The cookies associated with this document is: 
<script type="text/javascript">
document.write(document.cookie)
</script>

</body>
</html>

返回与当前文档相关的 cookie

<html>
<body>

The cookies associated with this document is: 
<script type="text/javascript">
document.write(document.cookie)
</script>

</body>
</html>

定义和用法
domain 属性可返回下载当前文档的服务器域名。
语法
document.domain
说明
该属性是一个只读的字符串，包含了载入当前文档的 web 服务器的主机名。
提示和注释
提示：domain 属性可以解决因同源安全策略带来的不同文档的属性共享问题。
点击这里，了解同源安全策略的详细信息。
实例

<html>
<body>

The domain name for this document is: 
<script type="text/javascript">
document.write(document.domain)
</script>

</body>
</html>

返回下载当前文档的服务器域名

<html>
<body>

本文档的域名是：
<script type="text/javascript">
document.write(document.domain)
</script>

</body>
</html>

定义和用法
lastModified 属性可返回文档最后被修改的日期和时间。
语法
document.lastModified
说明
该值来自于 Last-Modified HTTP 头部，它是由 Web 服务器发送的可选项。
实例

<html>
<body>

This document was last modified on:
<script type="text/javascript">
document.write(document.lastModified)
</script>

</body>
</html>

定义和用法
referrer 属性可返回载入当前文档的文档的 URL。
语法
document.referrer
说明
如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。
实例

<html>
<body>

The referrer of this document is:
<script type="text/javascript">
document.write(document.referrer)
</script>

</body>
</html>

定义和用法
title 属性可返回当前文档的标题（ HTML title 元素中的文本）。
语法
document.title
实例

<html>
<head>
<title>My title</title>
</head>

<body>
The title of the document is: 
<script type="text/javascript">
document.write(document.title)
</script>
</body>

</html>

定义和用法
URL 属性可返回当前文档的 URL。
语法
document.URL
说明
一般情况下，该属性的值与包含文档的 Window 的 location.href 属性相同。不过，在 URL 重定向发生的时候，这个 URL 属性保存了文档的实际 URL，而 location.href 保存了请求的 URL。
实例

<html>

<body>
The URL of this document is: 
<script type="text/javascript">
document.write(document.URL)
</script>
</body>

</html>

Document 对象方法
方法描述
close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
write() 向文档写 HTML 表达式或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

Document 对象描述
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。
write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容。
注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。

原文 http://www.w3school.com.cn/jsref/dom_obj_document.asp