JavaScript - 传统 DOM
这是 JavaScript 语言早期版本中引入的模型。所有浏览器都支持该模型，但仅允许访问文档的某些关键部分，例如表单、表单元素和图像。
该模型提供了一些只读属性，例如 title、URL 和 lastModified，它们提供了有关整个文档的信息。除此之外，该模型还提供了许多方法，可用于设置和获取文档属性值。
传统 DOM 中的文档属性
以下是可以使用传统 DOM 访问的文档属性列表。
| 序号 | 属性和说明 |
|---|---|
| 1 |
alinkColor 已弃用 - 用于指定激活链接颜色的字符串。 Ex - document.alinkColor |
| 2 |
anchors[ ] 一个 Anchor 对象数组，每个 Anchor 对象对应文档中出现的每个锚点 Ex - document.anchors[0]、document.anchors[1] 等等 |
| 3 |
applets[ ] 一个 Applet 对象数组，每个 Applet 对象对应文档中出现的每个小程序 Ex - document.applets[0]、document.applets[1]等等 |
| 4 |
bgColor 已弃用 - 用于指定文档背景颜色的字符串。 Ex - document.bgColor |
| 5 |
cookie 具有特殊行为的字符串值属性，允许查询和设置与此文档关联的 Cookie。 Ex − document.cookie |
| 6 |
domain 用于指定文档所属互联网域名的字符串。用于安全目的。 Ex − document.domain |
| 7 |
embeds[ ] 一个对象数组，表示使用 <embed> 标签嵌入文档的数据。与 plugins[ 同义。一些插件和 ActiveX 控件可以通过 JavaScript 代码控制。 Ex - document.embeds[0]、document.embeds[1] 等 |
| 8 |
fgColor 已弃用 - 用于指定文档默认文本颜色的字符串 Ex - document.fgColor |
| 9 |
forms[ ] Form 对象数组，每个对象对应文档中出现的 HTML 表单。 Ex - document.forms[0]、document.forms[1] 等 |
| 10 |
images[ ] 一个 Image 对象数组，每个对象对应一个通过 HTML <img> 嵌入到文档中的图像。标签。 Ex − document.images[0]、document.images[1] 等 |
| 11 |
lastModified 一个只读字符串，用于指定文档最近一次更改的日期 Ex − document.lastModified |
| 12 |
linkColor 已弃用 − 用于指定未访问链接颜色的字符串 Ex − document.linkColor |
| 13 |
links[ ] 这是一个文档链接数组。 例如 − document.links[0]、document.links[1] 等等 |
| 14 |
location 文档的 URL。已弃用，建议使用 URL 属性。 Ex − document.location |
| 15 |
plugins[ ] embeds[ ] 的同义词 Ex − document.plugins[0]、document.plugins[1] 等 |
| 16 |
Referrer 一个只读字符串，包含当前文档链接自的文档 URL(如果有)。 Ex − document.referrer |
| 17 |
Title <title> 标签的文本内容。 Ex − document.title |
| 18 |
URL 一个只读字符串，用于指定文档的 URL。 Ex − document.URL |
| 19 |
vlinkColor 已弃用 - 用于指定已访问链接颜色的字符串。 示例 - document.vlinkColor |
旧版 DOM 中的文档方法
以下是旧版 DOM 支持的方法列表。
| 序号 | 属性和说明 |
|---|---|
| 1 |
clear() 已弃用 - 清除文档内容，不返回任何内容。 Ex − document.clear( ) |
| 2 |
close( ) 关闭使用 open() 方法打开的文档流，不返回任何内容。 Ex − document.close() |
| 3 |
open() 删除现有文档内容并打开一个可写入新文档内容的流。不返回任何内容。 Ex − document.open() |
| 4 |
write( value, ...) 将指定的字符串插入当前正在解析的文档中，或将其附加到使用 open() 打开的文档中。不返回任何内容。 Ex − document.write( value, ...) |
| 5 |
writeln( value, ...) 与 write() 相同，不同之处在于它会在输出后附加一个换行符。不返回任何内容。 Ex − document.writeln( value, ...) |
示例
我们可以使用 HTML DOM 在任何 HTML 文档中定位任何 HTML 元素。例如，如果一个 Web 文档包含一个 form 元素，那么使用 JavaScript 我们可以用 document.forms[0] 来引用它。如果您的 Web 文档包含两个 form 元素，则第一个表单称为 document.forms[0]，第二个表单称为 document.forms[1]。
使用上面给出的层次结构和属性，我们可以使用 document.forms[0].elements[0] 访问第一个表单元素，依此类推。
以下是使用传统 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>
输出
注意 - 此示例返回表单和元素的对象，我们必须使用本教程中未讨论的对象属性来访问它们的值。
javascript_html_dom.html
