HTML DOM Document 对象
发布时间：2015-12-10, 14:30:41 分类：HTML | 编辑 off 网址 | 辅助
正文 10435字数 65,118阅读
Document 对象每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。Run code
Cut to clipboard
Document 对象集合
集合 描述
all[] 提供对文档中所有 HTML 元素的访问。
anchors[] 返回对文档中所有 Anchor 对象的引用。
applets 返回对文档中所有 Applet 对象的引用。
forms[] 返回对文档中所有 Form 对象引用。
images[] 返回对文档中所有 Image 对象引用。
links[] 返回对文档中所有 Area 和 Link 对象引用。Run code
Cut to clipboard
定义和用法
all 集合返回对文档中所有 HTML 元素的引用。
语法
document.all[i]
document.all[name]
document.all.tags[tagname]Run code
Cut to clipboard
说明
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>Run code
Cut to clipboard
返回文档中锚的数目
<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>Run code
Cut to clipboard
返回文档中第一个锚的 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>
Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
计算文档中表单的数目
<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>Run code
Cut to clipboard
访问集合中的项目
<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>
Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
计算文档中的图像数目
<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>Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
返回文档中链接的数目
<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>Run code
Cut to clipboard
返回文档中第一个链接的 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>Run code
Cut to clipboard
Document 对象属性
属性 描述
body
提供对 <body> 元素的直接访问。
对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie 设置或返回与当前文档有关的所有 cookie。
domain 返回当前文档的域名。
lastModified 返回文档被最后修改的日期和时间。
referrer 返回载入当前文档的文档的 URL。
title 返回当前文档的标题。
URL 返回当前文档的 URL。Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
返回与当前文档相关的 cookie
<html>
<body>
The cookies associated with this document is:
<script type="text/javascript">
document.write(document.cookie)
</script>
</body>
</html>Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
返回下载当前文档的服务器域名
<html>
<body>
本文档的域名是：
<script type="text/javascript">
document.write(document.domain)
</script>
</body>
</html>
Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
定义和用法
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>Run code
Cut to clipboard
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.aspRun code
Cut to clipboard
（支付宝）给作者钱财以资鼓励 （微信）→
暂无评论 »