扫码一下
查看教程更方便
每个网页都驻留在浏览器窗口中,可以将其视为一个对象。
文档对象表示显示在该窗口中的 HTML 文档。 文档对象具有引用其他对象的各种属性,这些对象允许访问和修改文档内容。
访问和修改文档内容的方式称为文档对象模型或 DOM。 这些对象按层次结构组织。 这种层次结构适用于 Web 文档中对象的组织。
以下是一些重要对象的简单层次结构
存在多个 DOM。 以下部分详细解释了这些 DOM 中的每一个,并描述了如何使用它们来访问和修改文档内容。
这是在 JavaScript 语言的早期版本中引入的模型。 它得到所有浏览器的良好支持,但只允许访问文档的某些关键部分,例如表单、表单元素和图像。
该模型提供了几个只读属性,例如 title、URL 和 lastModified 提供有关整个文档的信息。 除此之外,该模型还提供了多种方法,可用于设置和获取文档属性值。
以下是可以使用 Legacy DOM 访问的文档属性列表。
序号 | 属性 | 描述 | 示例 |
---|---|---|---|
1 | alinkColor | Deprecated - 指定激活链接颜色的字符串。 | 示例 :document.alinkColor |
2 | anchors[ ] | 一组锚点对象,一个对应文档中出现的每个锚点。 | 示例 :document.anchors[0]、document.anchors[1] 等 |
3 | applets[ ] | 一组 applet 对象,一个对应文档中出现的每个 applet。 | 示例 :document.applets[0]、document.applets[1] 等 |
4 | bgColor | Deprecated - 指定文档背景颜色的字符串。 | 示例 :document.bgColor |
5 | Cookie | 具有特殊行为的字符串值属性,允许查询和设置与此文档关联的 cookie。 | 示例 :document.cookie |
6 | Domain | 一个字符串,指定文档来自的 Internet 域。 用于安全目的。 | 示例 :document.domain |
7 | embeds[ ] | 一组对象,表示使用 <embed> 标记嵌入到文档中的数据。 插件 [] 的同义词。 一些插件和 ActiveX 控件可以用 JavaScript 代码控制。 | 示例 :document.embeds[0]、document.embeds[1] 等 |
8 | fgColor | 一个字符串,指定文档的默认文本颜色。 | 示例 :document.fgColor |
9 | forms[ ] | 一组表单对象,一个用于文档中出现的每个 HTML 表单。 | 示例 :document.forms[0]、document.forms[1] 等 |
10 | images[ ] | 一组表单对象,每个表单对象对应于文档中带有 HTML <img> 标记的每个 HTML 表单。 | 示例 :document.forms[0]、document.forms[1] 等 |
11 | lastModified | 一个只读字符串,指定文档最近更改的日期。 | 示例 :document.lastModified |
12 | linkColor | Deprecated - 指定未访问链接颜色的字符串。 | 示例 :document.linkColor |
13 | links[ ] | 它是一个文档链接数组。 | 示例 :document.links[0]、document.links[1] 等 |
14 | Location | 文档的 URL。 已弃用,取而代之的是 URL 属性。 | 示例 :document.location |
15 | plugins[ ] | embeds[ ] 的同义词 | 示例 :document.plugins[0]、document.plugins[1] 等 |
16 | Referrer | 一个只读字符串,包含当前文档所链接的文档的 URL(如果有)。 | 示例 :document.referrer |
17 | Title | <title> 标签的文本内容。 | 示例 :document.title |
18 | URL | 指定文档 URL 的只读字符串。 | 示例 :document.URL |
19 | vlinkColor | Deprecated - 指定访问链接颜色的字符串。 | 示例 :document.vlinkColor |
以下是 Legacy DOM 支持的方法列表。
序号 | 方法 | 描述 |
---|---|---|
1 | clear( ) | Deprecated - 擦除文档的内容并且不返回任何内容。 示例: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 方法访问文档属性的示例。
<html>
<head>
<title> Document Title </title>
<script type = "text/javascript">
<!--
function myFunc() {
var ret = document.title;
alert("Document Title : " + ret );
var ret = document.URL;
alert("Document URL : " + ret );
var ret = document.forms[0];
alert("Document First Form : " + ret );
var ret = document.forms[0].elements[1];
alert("Second element : " + ret );
} //
-->
</script>
</head>
<body>
<h1 id = "title">This is main title</h1>
<p>Click the following to see the result:</p>
<form name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>
注意
- 此示例返回表单和元素的对象。 我们将不得不使用本教程中未讨论的那些对象属性来访问它们的值。