- 0133技术站
- 联系QQ：18840023
- QQ交流群
- 微信公众号
灭绝小师太
更新时间：2019-06-25 15:52:00
每个web页面都驻留在一个浏览器窗口中，可以将其视为一个对象。
文档对象表示被显示在窗口中的HTML文档（HTML document）。文档对象具有引用其他对象的各种属性，这些属性允许访问和修改文档内容。
访问和修改文档内容的方法称为文档对象模型（document object model）或DOM。。对象按层次结构组织。这种层次结构适用于web文档中对象的组织。
下面是一些重要对象的简单层次结构：
存在着几个DOMS。以下各节将详细解释这些DOM，并描述如何使用它们访问和修改文档内容。
● Legacy DOM - 这是在早期版本的JavaScript语言中引入的模型。它得到了所有浏览器的良好支持，但只允许访问文档的某些关键部分，例如表单，表单元素和图像。
● W3C DOM - 此文档对象模型允许访问和修改所有文档内容，并由万维网联盟（W3C）标准化。几乎所有现代浏览器都支持此模型。
● IE4 DOM - 此文档对象模型是在Microsoft Internet Explorer浏览器的第4版中引入的。IE 5及更高版本包括对大多数基本W3C DOM功能的支持。
Legacy DOM
这是JavaScript语言早期版本中引入的模型。它得到了所有浏览器的良好支持，但只允许访问文档的某些关键部分，例如表单，表单元素和图像。
此模型提供了几个只读属性，例如title，URL和lastModified，提供有关整个文档的信息。除此之外，该模型提供了各种方法，可用于设置和获取文档属性值。
Legacy DOM中的文档属性
以下是可以使用Legacy DOM访问的文档属性列表。
| Sr.No | 和描述 |
|---|---|
| 1 | alinkColor 不推荐使用 - 指定激活链接颜色的字符串。 例：document.alinkColor |
| 2 | anchors[ ] 一个锚对象数组，用于文档中出现的每个锚。 例：document.anchors[0], document.anchors[1] 等 |
| 3 | applets[ ] 个applet对象数组，对应于文档中出现的每个applet。 例： document.applets[0], document.applets[1] and so on |
| 4 | bgColor 不推荐使用 - 指定文档背景颜色的字符串。 例： document.bgColor |
| 5 | Cookie 具有特殊行为的字符串值属性，允许查询和设置与此文档关联的cookie。 例： document.cookie |
| 6 | Domain 指定文档来自的Internet域的字符串。用于安全目的。 例： document.domain |
| 7 | embeds[ ] 一个对象数组，表示嵌入到文档中的带有<embed>标记的数据。plugins []的同义词。一些插件和ActiveX控件可以用JavaScript代码控制。 例： document.embeds[0], document.embeds[1] and so on |
| 8 | fgColor 一个字符串，指定文档的默认文本颜色。 例： document.fgColor |
| 9 | forms[ ] 一个表单对象数组，用于文档中出现的每个HTML表单。 例： document.forms[0], document.forms[1] and so on |
| 10 | images[ ] 一个表单对象数组，每个HTML表单对应一个HTML 标记出现在文档中的HTML表单。 例： document.forms[0], document.forms[1] and so on |
| 11 | lastModified 一个只读字符串，指定文档最近一次更改的日期。 例： document.lastModified |
| 12 | linkColor 一个指定未访问链接颜色的字符串。 例：document.linkColor |
| 13 | links[ ] 一个文档链接数组。 例： document.links[0], document.links[1] and so on |
| 14 | Location 文档的URL。不推荐使用URL属性。 例： document.location |
| 15 | plugins[ ] embeds[ ]的同义词。 例： document.plugins[0], document.plugins[1] and so on |
| 16 | Referrer 一个只读字符串，包含当前文档链接的文档的URL(如果有的话)。 例： document.referrer |
| 17 | Title <title>标签的文本内容。 例： document.title |
| 18 | URL 一个只读字符串，用于指定文档的URL。 例：document.URL |
| 19 | vlinkColor 不推荐使用 - 指定已访问链接颜色的字符串。 例： document.vlinkColor |
Legacy DOM中的文档方法
以下是Legacy DOM支持的方法列表。
| Sr.No | 和描述 |
|---|---|
| 1 | clear( ) 不推荐使用 - 删除文档的内容并且不返回任何内容。 例： document.clear( ) |
| 2 | close( ) 关闭使用open()方法打开的文档流，不返回任何内容。 |
| 3 | open( ) 删除现有文档内容并打开可以写入新文档内容的流。不返回任何内容。 例： document.open( ) |
| 4 | write( value, ...) 将指定的字符串或字符串插入当前正在解析的文档中，或附加到使用open（）打开的文档中。不返回任何内容。 例：document.write( value, ...) |
| 5 | writeln( value, ...) 与write( )相同，只是它在输出中附加换行符。不返回任何内容。 例：document.writeln( value, ...) |
我们可以使用HTML DOM在任何HTML文档中找到任何HTML元素。例如，如果Web文档包含表单元素，那么使用JavaScript，我们可以将其引用为document.forms [0]。 如果Web文档包含两个表单元素，则第一个表单称为document.forms [0]，第二个表单称为document.forms [1]。
使用上面给出的层次结构和属性，我们可以使用document.forms [0] .elements [0]等访问第一个表单元素。
例
以下是使用Legacy DOM方法访问文档属性的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.title;
alert("文档标题：" + ret );
var ret = document.URL;
alert("文档的URL：" + ret );
var ret = document.forms[0];
alert("文件第一表格：" + ret );
var ret = document.forms[0].elements[1];
alert("第二个元素：" + ret );
} //
-->
</script>
</head>
<body>
<h1 id = "title">这是主标题</h1>
<p>点击以下按钮查看结果:</p>
<form name = "FirstForm">
<input type = "button" value = "点击我" onclick = "myFunc();" />
<input type = "button" value = "取消">
</form>
<form name = "SecondForm">
<input type = "button" value = "不要点击我"/>
</form>
</body>
</html>成功执行上述代码后，将显示以下输出效果：
推荐手册