JavaScript 传统DOM

这是在早期版本的JavaScript语言中引入的模型。它被所有浏览器很好地支持，但只允许访问文档的某些关键部分，如表单、表单元素和图像。

这个模型提供了几个只读属性，例如title、URL和lastModified可以提供有关整个文档的信息。除此之外，此模型还提供了各种方法，可用于设置和获取文档属性值。

传统DOM中的文档属性

这是一个可以使用传统DOM访问的文档属性列表。

序号	属性和描述
1	alinkColor 废弃 – 字符串，指定激活链接的颜色。示例 - document.alinkColor
2	anchors[] 一个 Anchor 对象数组，每个对象表示文档中的一个锚点。示例 - document.anchors[0]、document.anchors[1]等等
3	applets[] 一个 Applet 对象数组，每个对象表示文档中的一个小程序。示例 - document.applets[0]、document.applets[1]等等
4	bgColor 废弃 – 字符串，指定文档的背景颜色。示例 \| − document.bgColor
5	cookie 一个具有特殊性质的字符串值属性，允许查询和设置与该文档关联的cookie。例如 − document.cookie
6	domain 指定文档来自的互联网域的字符串。用于安全目的。例如 − document.domain
7	embeds[ ] 一个表示文档中使用标签嵌入的数据的对象数组。是plugins[ ]的同义词。一些插件和ActiveX控件可以通过JavaScript代码控制。例如 − 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[ ] 这是一个文档链接数组。 Ex - 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（如果有）。示例 − document.referrer
17	标题 `<title>`标签的文本内容。示例 − document.title
18	URL 一个只读字符串，用于指定文档的URL。示例 − document.URL
19	vlinkColor 不推荐使用 − 一个字符串，用于指定已访问链接的颜色。示例 − document.vlinkColor

在Legacy DOM中的文档方法

下面是Legacy DOM支持的方法列表。

序号	属性和描述
1	clear( ) 弃用 – 删除文档的内容并返回无值。例 - document.clear( )
2	close( ) 关闭使用open()方法打开的文档流，并返回无值。例 - document.close( )
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>