HTML DOM Document 对象 对象集合与对象属性篇
本帖最后由 mickeyort 于 2020-3-31 13:02 编辑Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。
Document 对象集合
集合描述
all[]提供对文档中所有 HTML 元素的访问。
anchors[]返回对文档中所有 Anchor 对象的引用。
applets返回对文档中所有 Applet 对象的引用。
forms[]返回对文档中所有 Form 对象引用。
images[]返回对文档中所有 Image 对象引用。
links[]返回对文档中所有 Area 和 Link 对象引用。
Document 对象属性
属性描述
body提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie设置或返回与当前文档有关的所有 cookie。
domain返回当前文档的域名。
lastModified返回文档被最后修改的日期和时间。
referrer返回载入当前文档的文档的 URL。
title返回当前文档的标题。
URL返回当前文档的 URL。
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 继承而不是由它定义了。
本帖最后由 mickeyort 于 2020-3-31 09:55 编辑
HTML DOM all 集合
定义和用法
all 集合返回对文档中所有 HTML 元素的引用。
语法
document.all
document.all
document.all.tags
说明
all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。
all[] 已经被 Document 接口的标准的 getElementById() 方法和 getElementsByTagName() 方法以及 Document 对象的 getElementsByName() 方法所取代。尽管如此，这个 all[] 数组在已有的代码中仍然使用。
all[] 包含的元素保持了最初的顺序，如果你知道它们在数组中的确切数字化位置，可以直接从数组中提取它们。然而，更为常见的是使用 all[] 数组，根据它们的 HTML 属性 name 或 id 来访问元素。如果多个元素拥有指定的 name，将得到共享同一名称的元素的一个数组。
HTML DOM anchors 集合
定义和用法
anchors 集合可返回对文档中所有 Anchor 对象的引用。就是返回网页中的A标签的集合
语法
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>
本帖最后由 mickeyort 于 2020-3-31 09:58 编辑
HTML DOM forms 集合
定义和用法
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 DOM images 集合
定义和用法
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 DOM links 集合
定义和用法
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 DOM cookie 属性
定义和用法
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> HTML DOM domain 属性
定义和用法
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>
本实例输出 : 本文档的域名是： www.w3school.com.cn
HTML DOM lastModified 属性
定义和用法
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>
HTML DOM referrer 属性
定义和用法
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>
HTML DOM title 属性
定义和用法
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>
HTML DOM URL 属性
定义和用法
URL 属性可返回当前文档的 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>
该文档的 URL 是： https://www.w3school.com.cn/tiy/v.asp?code=%3Chtml%3E%0D%0A%0D%0A%3Cbody%3E%0D%0A%E8%AF%A5%E6%96%87%E6%A1%A3%E7%9A%84+URL+%E6%98%AF%EF%BC%9A%0D%0A%3Cw3scrw3ipttag+typew3equalsign%22text%2Fjavaw3scrw3ipttag%22%3E%0D%0Adocument.write%28document.URL%29%0D%0A%3C%2Fw3scrw3ipttag%3E%0D%0A%3C%2Fbody%3E%0D%0A%0D%0A%3C%2Fhtml%3E%0D%0A
页:
[1]