JavaScript – 传统 DOM

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

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

传统DOM中的文档属性

下面是可使用传统DOM访问的文档属性的列表。

序号	属性和描述
1	alinkColor 已停用 – 指定激活链接的颜色的字符串。例如 - document.alinkColor
2	anchors[ ] 链接对象数组，一个为该文档中的每个链接。例如 - document.anchors[0]，document.anchors[1]等等
3	applets[ ] Applet对象数组，一个为该文档中的每个Applet。例如 - document.applets[0]，document.applets[1]等等
4	bgColor 已停用 – 指定文档背景颜色的字符串。例如 - document.bgColor
5	cookie 带有特殊行为的字符串值属性，允许查询和设置与此文档相关的cookie。例如 - document.cookie
6	domain 指定文档所在的Internet域的字符串。用于安全目的。例如 - document.domain
7	embeds[ ] 表示使用标记在文档中嵌入的数据的对象数组。与plugins[ ]同义。一些插件和ActiveX控件可以用JavaScript代码控制。例如 - document.embeds[0]，document.embeds[1]等等
8	fgColor 已停用 – 指定文档默认文本颜色的字符串。例如 - document.fgColor
9	forms[ ] 表单对象数组，一个为该文档中的每个HTML表单。例如 - document.forms[0]，document.forms[1]等等
10	images[ ] 表示在文档中使用HTML标记嵌入的每个图像的图像对象数组。例如 - document.images[0]，document.images[1]等等
11	lastModified 只读字符串，指定文档最近更改的日期。例如 - document.lastModified
12	linkColor 已停用 – 指定未访问链接的颜色的字符串。例如 - document.linkColor
13	links[ ] 文档链接数组。例如 - document.links[0]，document.links[1]等等
14	location 文档的URL。已停用，使用URL属性。例如 - document.location
15	plugins[ ] 嵌入数组的同义词例如 - document.plugins[0]，document.plugins[1]等等
16	Referrer 只读字符串，包含当前文档从中链接到当前文档的任何文档的URL（如果有）。例如 - document.referrer
17	Title 标记的文本内容。例如 - document.title
18	URL 只读字符串，指定文档的URL。例如 - document.URL
19	vlinkColor 已停用 – 指定已访问链接的颜色的字符串。例如:document.vlinkColor 用于设置访问过的链接的颜色

遗留DOM中的文档方法

这是遗留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文档包含一个 form 元素，那么使用JavaScript我们可以将其称为 document.forms[0] 。如果您的Web文档包含两个 form 元素，则第一个表格称为document.forms[0]，第二个表格称为document.forms[1]。

通过上面给出的层次结构和属性，我们可以使用 document.forms[0].elements[0] 访问第一个表单元素，依此类推。

这是使用遗留DOM方法访问文档属性的示例。

<html>

   <head>
      <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>