位置:首页 > Web开发 > Javascript在线教程 > JavaScript传统DOM

JavaScript传统DOM

这是将其在JavaScript语言早期版本中引入的模型。大家都被所有浏览器都支持,但只允许访问文件的某些关键部分,如表单,表单元素和图像。

该模型提供了若干个只读属性,如标题,URL和上次更改提供关于文档整体的信息。除了有由该模型可用于设置和获取文档的属性值提供各种方法。

文档属性在传统DOM:

下面是文档属性,可以使用传统DOM访问列表:

属性 介绍和示例
alinkColor 弃用 - 一个字符串,指定激活链接的颜色。
例如:document.alinkColor
anchors[ ] 锚对象的每个锚的数组,出现在文档中
示例: document.anchors[0], document.anchors[1] 等等
applets[ ] Applet对象为每个小程序的数组,一个出现在文档中
例如: document.applets[0], document.applets[1] 等等
bgColor Deprecated - 一个字符串,指定文档的背景颜色
例如: document.bgColor
cookie 有特殊行为的一个字符串值属性,允许与此文档相关的cookie来进行查询和设置
例如: document.cookie
domain 一个字符串,是从指定互联网领域的文件。用于安全目的
例如: document.domain
embeds[ ] 代表嵌入使用<embed>标签的文档中的数据对象的数组。同义词的plugins[]。一些插件和ActiveX控件可以用JavaScript代码来控制。
例如: document.embeds[0], document.embeds[1] 等等
fgColor 弃用 - 一个字符串,指定文档的默认文本颜色
例如: document.fgColor
forms[ ] 一种形式的数组对象,一个用于显示的文档中的每个HTML表单。 
例如: document.forms[0], document.forms[1] 等等
images[ ] Image对象的数组,一个嵌入HTML <img>标签的文档中的每个图像。
例如: document.images[0], document.images[1] 等等
lastModified 一个只读字符串,指定最近的更改日期的文件
例如: document.lastModified
linkColor 弃用 - 一个字符串,指定的未访问链接的颜色
例如: document.linkColor
links[ ] links[ ] 
例如: document.links[0], document.links[1] 等等
location 该文件的URL。不赞成使用的URL属性
例如: document.location
plugins[ ] embeds[ ] 的代名词 
例如: document.plugins[0], document.plugins[1] and so on
referrer 包含该文档的URL,如果有的话,从该当前文档被挂只读字符串
例如: document.referrer
title 在<title>标签的文本内容
例如: document.title
URL 一个只读字符串,指定文档的URL
例如: document.URL
vlinkColor 弃用 - 一个字符串,指定访问过的链接的颜色
例如:document.vlinkColor

文档方法在传统DOM:

这里是由传统DOM支持的方法列表:

属性 介绍和示例
clear( ) 弃用- 删除的文件,不返回任何内容
示例: document.clear( )
close( ) 关闭打开open()方法返回任何文档流
示例: document.close( )
open( ) 删除现有文档的内容,并打开一个流到新文档的内容可能会被写入。不返回任何内容。
示例: document.open( )
write( value, ...) 将指定的字符串或字符串插入到文档中正在解析或附加文件开放open()。不返回任何内容。
示例: document.write( value, ...)
writeln( value, ...) 完全相同于write( ),但它附加一个换行符输出。不返回任何内容
示例: document.writeln( value, ...)

例子:

我们可以找到任何HTML元素,使用HTML DOM任何HTML文档。例如,如果一个网页文件包含一个表单元素,然后使用JavaScript,我们可以把它称为document.forms[0]。如果Web文档包括两个形式元素的第一种形式被称为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>

注意: 这个例子的形式和内容等返回对象,我们将不得不使用未在本在线教程中讨论这些对象的属性来访问它们的值。