HTML DOM Document 对象对象集合与对象属性篇

mickeyort · 发表于 2020-3-31 09:47:51

本帖最后由 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:51:49

本帖最后由 mickeyort 于 2020-3-31 09:55 编辑

HTML DOM all 集合

定义和用法
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，将得到共享同一名称的元素的一个数组。

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:56:51

本帖最后由 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>

复制代码

mickeyort · 发表于 2020-3-31 10:00:58

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>

复制代码

mickeyort · 发表于 2020-3-31 12:53:01

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>

复制代码

mickeyort · 发表于 2020-3-31 12:55:02

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

mickeyort · 发表于 2020-3-31 12:58:41

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>

复制代码

mickeyort · 发表于 2020-3-31 12:59:36

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>

复制代码

mickeyort · 发表于 2020-3-31 13:00:33

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>

复制代码

mickeyort · 发表于 2020-3-31 13:02:01

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/ ... %3C%2Fhtml%3E%0D%0A

账号		自动登录	找回密码
密码			注册账号

[JS] HTML DOM Document 对象对象集合与对象属性篇

浏览过的版块

【江湖新秀】

【宝剑回鞘】

【泰拉达人】

【奥运选手】

[JS] HTML DOM Document 对象 对象集合与对象属性篇

浏览过的版块

【江湖新秀】

【宝剑回鞘】

【泰拉达人】

【奥运选手】

[JS] HTML DOM Document 对象对象集合与对象属性篇