HTML DOM
什么叫DOM，DOM是文档对象模型(Document Object Model，是基于浏览器编程（在本教程中，可以说 就是DHTML编程）的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器最与标准接近。单纯的 Javascript要结合DOM才能做DHTML编程，才能做出漂亮的效果、应用于WEB。这点几乎与其它的语言无异，正如C/C++需要库支持是一样 的道理。否则就是单纯的在语法上做研究了。因此，必须要对DOM有一定的认识，才能把Javascript应用于WEB，或你的RIA应用当中，因为 DHTML本质上就是操作DOM树。
以后的编程当中，希望你能够把DHTML.chm这本手册也拿上，如果你需要兼容gecko，把gecko的DOM手册也带上。因为API太多，想不起来的接口还可以查这本手册。
如果你要测试浏览器是否是支持DOM的，简单的一句就可以判断
<script>
var isSupportDOM = !!document.getElementById; //两个取反，这已经在上节中说过了，意思是强制转型
alert("你的浏览器 " +(isSupportDOM?"":"不")+ "支持 DOM！");
</script>
二、DOM树
要注意：DOM树的根统一为文档根—document，DOM既然是树状结构，那么他们自然有如下的几种关系:
根结点(document)
父结点(parentNode)
子结点(childNodes)
兄弟结点 兄弟结点
(sibling) (sibling)
例子：
假设网页的HTML如下
<html>
<head>
<title>never-online's website</title>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
</body>
</html>
我们参照树的概念，画出该HTML文档结构的DOM树：
html
body head
div title
文本 文本
从上面的图示可以看出
html有两个子结点，而html就是这两个子节点的父结点
head有节点title，title下有一个文本节点
doby下有节点div，div下有一个文本节点
三、操作DOM树
开篇已经说过，DHTML本质就是操作DOM树。如何操作它呢？
假设我要改变上面HTML文档中div结点的文本，如何做？[code]<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var nodeRoot = document; //这个是根结点
var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点
var nodeBody = nodeHTML.childNodes[1]; //body结点
var nodeDiv = nodeBody.childNodes[0]; //DIV结点
var nodeText = nodeDiv.childNodes[0];//文本结点'
nodeText.data = strText; //文本节点有data这个属性，因此我们可以改变这个属性，也就成功的操作了DOM树中的一个结点了
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
从 上面的示例可以看出，我们可以用上面的这种方法操作DOM树上的任一节点。（注：1. 跨域除外，跨域通常是在操作frame上，简单的说，就是两个 frame不属于同一域名。2.上面的操作为了演示，采用的方法是从根结点一直到文本结点的遍历，在DOM方法上，有更简洁的方法，这些以后会有更多示例 加以说明，下文中也会有介绍）
三、DOM节点。
细心些的朋友也许发现了，在上面写的HTML代码时用<>与< />包函起来的就是一个结点，事实上是这样的吗？答案是否定的。下面就是说说节点类型，否则在有的时候是会犯错误的。比如，你把上面的代码放到 Mozilla firefox的浏览器里运行一下，就会知道了。
DOM中的结点类型比较多，这里写一些在HTML文档中（注：XML也是DOM树结构）常见的几种结点类型。
1、DOCUMENT_NODE
（document）文档根结点类型，该枚举型的值是9.
2、ELEMENT_NODE
（element）元素结点类型，该枚举型的值是1。上文中的html, body, div这些结点都是属于该类型。
3、TEXT_NODE
（text）文本结点类型，该枚举型的值是3。上文中的文本，如：tutorial of DHTML and javascript programming就是属于该类型。
（注：一个空格也就可能是一个文本结点）
通常更需要注意的是文本结点，有可能一个回车，一个空格都是文本结点。这一点以后会碰到，当然，我们也有办法处理，这里先不要急，以后也会说到的。
四、DOM常用的API
这 些常用的API是要记下来的，当然在非IE的浏览器里也会有效，是符合w3c的。这些API在以后的编程中会常常用到。正如每个编程平台所提供的API一 样，常用必须记下来，节省时间从而提高编程效率。只写几个最常用的，其它的API会在以后的示例中写出。由浅而深，从易到难嘛。
1、获取ELEMENT_NODE，元素节点
1)、 方法：document.getElementById(元素的Id)，返回值为元素的节点引用。可以假想一下这个API的原理：象我们上面所做的是遍历 每个节点（从根到我们所需结点），这个API，也可以想成是从根遍历，查询每个结点（空白结点和空结点除外），并获取该结点的id是否为指定的ID，如果 是的话，就返回这个结点（注：在JS中，数组和对象是引用类型），如果没有就返回空。我们可以写写这个代码，帮助我们理解 document.getElementById。下面是一个简单遍历BODY中元素的示例。
<html>
<head>
<title>never-online's website</title>
<script>
function myGetElementById (id) {
var nodeRoot = document; //这个是根结点
var nodeHTML = nodeRoot.childNodes[0]; //这个是html结点
var nodeBody = nodeHTML.childNodes[1]; //body结点
var bodyChild = nodeBody.childNodes; //body的孩子
for (var i=0; i<bodyChild.length; i++) { //简单的遍历（指body的孩子下的深度为1)
if (bodyChild[i].id==id) return bodyChild[i];
};
return null;
}
function TestGetElementById (id) {
var node = myGetElementById(id);
if (node!=null) {
alert("找到结点 "+id+"!");
alert(node.childNodes[0].data);
} else {
alert("没有找到结点 "+id+".");
}
}
</script>
</head>
<body>
<div id="aTestNode"></div>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="TestGetElementById('textNode')" type="button" value="change"/>
</body>
</html>
2)、 属性：object.innerHTML，返回值：一个节点内的HTML值。该属性为可写属性。它虽然不是获取结点，但经常与获取结点相结合，所以我把它 放在获取结点这一类，它的属性就类似于是纯文本节点属性中的data。以document.getElementById和 object.innerHTML这两个API为例，我们就可以把上面所写的代码简化一下了，示例如下：
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("textNode");
node.innerHTML = strText;
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
3)、 方法：object.getElementsByTagName(标签的名字)，返回一个集合，该集合的把有元素都是有指定标签的元素。访问集合里的元 素，可以用下标来访问。语法里的object，是指document（根）或者是一个ELEMENT_NODE。这个的原理示例我就不写了，可以作为一个 作业，大家可以写写。这里写一些具体应用。如上例，我们还可以这样写。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementsByTagName("DIV");
node[0].innerHTML = strText;
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
再取一个例子，注意，BODY下的结点深度为2。
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementById("nodeTest");
var myNode = node.getElementsByTagName("DIV");
myNode[0].innerHTML = strText;
}
</script>
</head>
<body>
<div id="nodeTest">
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</div>
</body>
</html>
二、动态创建与插入结点
1)、创建结点对象。document.createElement(tagname)，tagname指的是一个标签，比如一个DIV，就是document.createElement("DIV")，它返回的是这个结点的引用。
2)、在body的尾部插入结点用document.body.appendChild(object)，为了容易理解，下面这个示例，我用了IE专有的属性object.outerHTML，得到一个该元素的HTML标签内容（包括自身），这样会更容易看到效果。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：/n" +document.body.outerHTML);
var node = document.createElement("DIV");
node.innerHTML = strText;
document.body.appendChild(node);
alert("插入元素后的body HTML：/n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
3)、 在元素处插入结点。object.insertBefore(oNewNode [, oChildNode])，oNewNode为一个我们创建的结 点，oChildNode是可选的，为object下的一个子节点。同样的，为了看到效果，我也用了outerHTML。示例
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：/n" +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML：/n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
三、移除结点。
1) object.parentNode.removeChild(oChildNode)，这个就是语法，下面看示例。
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML：/n" +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML：/n" +document.body.outerHTML);
}
function removeCreateNode() {
alert("移除元素前的body HTML：/n" +document.body.outerHTML);
var node = document.getElementById("textNode");
node.parentNode.removeChild(node);
alert("移除元素前的body HTML：/n" +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>
在 JavaScript 能够涉及的范围内有如下几个“大”对象：window, document, location, navigator, screen, history 等。下面是一个文档对象树，你可以看到对象下包含对象的“壮观”情景。要引用某个对象，就要把父级的对象都列出来。例如，要引用某表单“applicationForm”的某文字框“customerName”，就要用“document.applicationForm.customerName”。
下表中有些对象是全小写的，有些是以大写字母开头的。以大写字母开头的对象表示，引用该对象不使用下表列出的名字，而直接用对象的“名字”（Id 或 Name，下面有讲解），或用它所属的对象数组指定。
这里我们不准备讲解对象的“事件”，虽然我们也会列出对象所能响应的事件。我们将会在下一章“事件处理”中讲解事件。
|
浏览器对象 屏幕对象 窗口对象 历史对象 地址对象 框架对象 文档对象 连接对象 Java小程序对象 插件对象 表单对象 按钮对象 复选框对象 表单元素对象 隐藏对象 密码输入区对象 单选域对象 重置按钮对象 选择区（下拉菜单、列表）对象 选择项对象 提交按钮对象 文本框对象 多行文本输入区对象 图片对象 |
navigator 浏览器对象 反映了当前使用的浏览器的资料。
属性
appCodeName 返回浏览器的“码名”(?)，流行的 IE 和 NN 都返回 'Mozilla'。
appName 返回浏览器名。IE 返回 'Microsoft Internet Explorer'，NN 返回 'Netscape'。
appVersion 返回浏览器版本，包括了大版本号、小版本号、语言、操作平台等信息。
platform 返回浏览器的操作平台，对于 Windows 9x 上的浏览器，返回 'Win32'（大小写可能有差异）。
userAgent 返回以上全部信息。例如，IE5.01 返回 'Mozilla/4.0 (compatible; MSIE 5.01; Windows 98)'。
javaEnabled() 返回一个布尔值，代表当前浏览器允许不允许 Java。
screen 屏幕对象 反映了当前用户的屏幕设置。
属性
width 返回屏幕的宽度（像素数）。
height 返回屏幕的高度。
availWidth 返回屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。
availHeight 返回屏幕的可用高度。
colorDepth 返回当前颜色设置所用的位数 - 1：黑白；8：256色；16：增强色；24/32：真彩色
window 窗口对象 最大的对象，它描述的是一个浏览器窗口。一般要引用它的属性和方法时，不需要用“window.xxx”这种形式，而直接使用“xxx”。一个框架页面也是一个窗口。
属性
name 窗口的名称，由打开它的连接（<a target="...">）或框架页（<frame name="...">）或某一个窗口调用的 open() 方法（见下）决定。一般我们不会用这个属性。
status 指窗口下方的“状态栏”所显示的内容。通过对 status 赋值，可以改变状态栏的显示。
opener 用法：window.opener；返回打开本窗口的窗口对象。注意：返回的是一个窗口对象。如果窗口不是由其他窗口打开的，在 Netscape 中这个属性返回 null；在 IE 中返回“未定义”（undefined）。undefined 在一定程度上等于 null。注意：undefined 不是 JavaScript 常数，如果你企图使用“undefined”，那就真的返回“未定义”了。
self 指窗口本身，它返回的对象跟 window 对象是一模一样的。最常用的是“self.close()”，放在<a>标记中：“<a href="javascript:self.close()">关闭窗口</a>”。
parent 返回窗口所属的框架页对象。
top 返回占据整个浏览器窗口的最顶端的框架页对象。
history 历史对象，见下。
location 地址对象，见下。
document 文档对象，见下。方法
open() 打开一个窗口。用法：open(<URL字符串>, <窗口名称字符串>, <参数字符串>);
<URL字符串>：描述所打开的窗口打开哪一个网页。如果留空（''），则不打开任意网页。
<窗口名称字符串>：描述被打开的窗口的名称（window.name），可以使用'_top'、'_blank'等内建名称。这里的名称跟“<a href="..." target="...">”里的“target”属性是一样的。
<参数字符串>：描述被打开的窗口的样貌。如果只需要打开一个普通窗口，该字符串留空（''），如果要指定样貌，就在字符串里写上一到多个参数，参数之间用逗号隔开。例：打开一个 400 x 100 的干净的窗口：
open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')
参数
top=# 窗口顶部离开屏幕顶部的像素数 left=# 窗口左端离开屏幕左端的像素数 width=# 窗口的宽度 height=# 窗口的高度 menubar=... 窗口有没有菜单，取值yes或no toolbar=... 窗口有没有工具条，取值yes或no location=... 窗口有没有地址栏，取值yes或no directories=... 窗口有没有连接区，取值yes或no scrollbars=... 窗口有没有滚动条，取值yes或no status=... 窗口有没有状态栏，取值yes或no resizable=... 窗口给不给调整大小，取值yes或no open() 方法有返回值，返回的就是它打开的窗口对象。所以，
var newWindow = open('','_blank');
这样把一个新窗口赋值到“newWindow”变量中，以后通过“newWindow”变量就可以控制窗口了。
close() 关闭一个已打开的窗口。
用法：window.close() 或 self.close()：关闭本窗口；
<窗口对象>.close()：关闭指定的窗口。
如果该窗口有状态栏，调用该方法后浏览器会警告：“网页正在试图关闭窗口，是否关闭？”然后等待用户选择是否；如果没有状态栏，调用该方法将直接关闭窗口。
blur() 使焦点从窗口移走，窗口变为“非活动窗口”。
focus() 是窗口获得焦点，变为“活动窗口”。不过在 Windows 98，该方法只能使窗口的标题栏和任务栏上的相应按钮闪烁，提示用户该窗口正在试图获得焦点。
scrollTo() 用法：[<窗口对象>.]scrollTo(x, y)；使窗口滚动，使文档从左上角数起的(x, y)点滚动到窗口的左上角。
scrollBy() 用法：[<窗口对象>.]scrollBy(deltaX, deltaY)；使窗口向右滚动 deltaX 像素，向下滚动 deltaY 像素。如果取负值，则向相反的方向滚动。
resizeTo() 用法：[<窗口对象>.]resizeTo(width, height)；使窗口调整大小到宽 width 像素，高 height 像素。
resizeBy() 用法：[<窗口对象>.]resizeBy(deltaWidth, deltaHeight)；使窗口调整大小，宽增大 deltaWidth 像素，高增大 deltaHeight 像素。如果取负值，则减少。
alert() 用法：alert(<字符串>)；弹出一个只包含“确定”按钮的对话框，显示<字符串>的内容，整个文档的读取、Script 的运行都会暂停，直到用户按下“确定”。
confirm() 用法：confirm(<字符串>)；弹出一个包含“确定”和“取消”按钮的对话框，显示<字符串>的内容，要求用户做出选择，整个文档的读取、Script 的运行都会暂停。如果用户按下“确定”，则返回 true 值，如果按下“取消”，则返回 false 值。
prompt() 用法：prompt(<字符串>[, <初始值>])；弹出一个包含“确认”“取消”和一个文本框的对话框，显示<字符串>的内容，要求用户在文本框输入一些数据，整个文档的读取、Script 的运行都会暂停。如果用户按下“确认”，则返回文本框里已有的内容，如果用户按下“取消”，则返回 null 值。如果指定<初始值>，则文本框里会有默认值。事件
onload; onunload; onresize; onblur; onfocus; onerror
history 历史对象 历史对象指浏览器的浏览历史。鉴于安全性的需要，该对象收到很多限制，现在只剩下下列属性和方法。
属性
length 历史的项数。JavaScript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。
方法
back() 后退，跟按下“后退”键是等效的。
forward() 前进，跟按下“前进”键是等效的。
go() 用法：history.go(x)；在历史的范围内去到指定的一个地址。如果 x < 0，则后退 x 个地址，如果 x > 0，则前进 x 个地址，如果 x == 0，则刷新现在打开的网页。history.go(0) 跟 location.reload() 是等效的。
location 地址对象 它描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址，只需要使用“location”就行了；若要表示某一个窗口的地址，就使用“<窗口对象>.location”。
注意 属于不同协议或不同主机的两个地址之间不能互相引用对方的 location 对象，这是出于安全性的需要。例如，当前窗口打开的是“www.a.com”下面的某一页，另外一个窗口（对象名为：bWindow）打开的是“www.b.com”的网页。如果在当前窗口使用“bWindow.location”，就会出错：“没有权限”。这个错误是不能用错误处理程序（Event Handler，参阅 onerror 事件)来接收处理的。
属性
protocol 返回地址的协议，取值为 'http:','https:','file:' 等等。
hostname 返回地址的主机名，例如，一个“http://www.microsoft.com/china/”的地址，location.hostname == 'www.microsoft.com'。
port 返回地址的端口号，一般 http 的端口号是 '80'。
host 返回主机名和端口号，如：'www.a.com:8080'。
pathname 返回路径名，如“http://www.a.com/b/c.html”，location.pathname == 'b/c.html'。
hash 返回“#”以及以后的内容，如“http://www.a.com/b/c.html#chapter4”，location.hash == '#chapter4'；如果地址里没有“#”，则返回空字符串。
search 返回“?”以及以后的内容，如“http://www.a.com/b/c.asp?selection=3&jumpto=4”，location.search == '?selection=3&jumpto=4'；如果地址里没有“?”，则返回空字符串。
href 返回以上全部内容，也就是说，返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。如果想一个窗口对象打开某地址，可以使用“location.href = '...'”，也可以直接用“location = '...'”来达到此目的。方法
reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。
replace() 打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后，按下浏览器的“后退”键将不能返回到刚才的页面。
frames[]; Frame 框架对象 请参阅“使用框架和 Cookies”一章。
document 文档对象 描述当前窗口或指定窗口对象的文档。它包含了文档从<head>到</body>的内容。
用法：document （当前窗口）
或 <窗口对象>.document （指定窗口）
属性
cookie 关于 cookie 请参看“使用框架和 Cookies”一章。
lastModified 当前文档的最后修改日期，是一个 Date 对象。
referrer 如果当前文档是通过点击连接打开的，则 referrer 返回原来的 URL。
title 指<head>标记里用<title>...</title>定义的文字。在 Netscape 里本属性不接受赋值。
fgColor 指<body>标记的 text 属性所表示的文本颜色。
bgColor 指<body>标记的 bgcolor 属性所表示的背景颜色。
linkColor 指<body>标记的 link 属性所表示的连接颜色。
alinkColor 指<body>标记的 alink 属性所表示的活动连接颜色。
vlinkColor 指<body>标记的 vlink 属性所表示的已访问连接颜色。方法
open() 打开文档以便 JavaScript 能向文档的当前位置（指插入 JavaScript 的位置）写入数据。通常不需要用这个方法，在需要的时候 JavaScript 自动调用。
write(); writeln() 向文档写入数据，所写入的会当成标准文档 HTML 来处理。writeln() 与 write() 的不同点在于，writeln() 在写入数据以后会加一个换行。这个换行只是在 HTML 中换行，具体情况能不能够是显示出来的文字换行，要看插入 JavaScript 的位置而定。如在<pre>标记中插入，这个换行也会体现在文档中。
clear() 清空当前文档。
close() 关闭文档，停止写入数据。如果用了 write[ln]() 或 clear() 方法，就一定要用 close() 方法来保证所做的更改能够显示出来。如果文档还没有完全读取，也就是说，JavaScript 是插在文档中的，那就不必使用该方法。现在我们已经拥有足够的知识来做以下这个很多网站都有的弹出式更新通知了。
<script language="JavaScript">
<!--
var whatsNew = open('','_blank','top=50,left=50,width=200,height=300,' +
'menubar=no,toolbar=no,directories=no,location=no,' +
'status=no,resizable=no,scrollbars=yes');
whatsNew.document.write('<center><b>更新通知</b></center>');
whatsNew.document.write('<p>最后更新日期：00.08.01');
whatsNew.document.write('<p>00.08.01：增加了“我的最爱”栏目。');
whatsNew.document.write('<p align="right">' +
'<a href="javascript:self.close()">关闭窗口</a>');
whatsNew.document.close();
-->
</script>当然也可以先写好一个 HTML 文件，在 open() 方法中直接 load 这个文件。
anchors[]; links[]; Link 连接对象
用法：document.anchors[[x]]; document.links[[x]]; <anchorId>; <linkId>
document.anchors 是一个数组，包含了文档中所有锚标记（包含 name 属性的<a>标记），按照在文档中的次序，从 0 开始给每个锚标记定义了一个下标。
document.links 也是一个数组，包含了文档中所有连接标记（包含 href 属性的<a>标记和<map>标记段里的<area>标记），按照在文档中的次序，从 0 开始给每个连接标记定义了一个下标。
如果一个<a>标记既有 name 属性，又有 href 属性，则它既是一个 Anchor 对象，又是一个 Link 对象。
在 IE 中，如果在<a>标记中添加“id="..."”属性，则这个<a>对象被赋予一个标识（ID），调用这个对象的时候只需要使用“<id>”就行了。很多文档部件都可以用这个方法来赋予 ID，但要注意不能有两个 ID 相同。
anchors 和 links 作为数组，有数组的属性和方法。单个 Anchor 对象没有属性；单个 Link 对象的属性见下。
属性
protocol; hostname; port; host; pathname; hash; search; href 与 location 对象相同。
target 返回/指定连接的目标窗口（字符串），与<a>标记里的 target 属性是一样的。事件
onclick; onmouseover; onmouseout; onmousedown; onmouseup
applets[] Java小程序对象 它是一个数组，包含了文档中所有的 Applet 对象（Java 小程序）。作为一个数组，有数组的属性和方法。关于单个 Applet 对象的属性和方法，我引用一句话：“Applet 对象继承了 Java 小程序的所有公共属性和方法。”(英文原句：The Applet object inherits all public properties of the Java applet./The Applet object inherits all public methodss of the Java applet.) 因为本人很厌恶 Java 小程序，所以对它的什么“公共”“私有”的问题不感兴趣，也就没有探讨了。
embeds[] 插件对象 它是一个数组，包含了文档中所有的插件（<embed>标记）。因为每个插件的不同，每个 Embed 对象也有不同的属性和方法。
forms[]; Form 表单对象 document.forms[] 是一个数组，包含了文档中所有的表单（<form>）。要引用单个表单，可以用 document.forms[x]，但是一般来说，人们都会这样做：在<form>标记中加上“name="..."”属性，那么直接用“document.<表单名>”就可以引用了。
Form 对象的属性
name 返回表单的名称，也就是<form name="...">属性。
action 返回/设定表单的提交地址，也就是<form action="...">属性。
method 返回/设定表单的提交方法，也就是<form method="...">属性。
target 返回/设定表单提交后返回的窗口，也就是<form target="...">属性。
encoding 返回/设定表单提交内容的编码方式，也就是<form enctype="...">属性。
length 返回该表单所含元素的数目。方法
reset() 重置表单。这与按下“重置”按钮是一样的。
submit() 提交表单。这与按下“提交”按钮是一样的。事件
onreset; onsubmit
以下从“Button”到“Textarea”都是表单的元素对象。
Button 按钮对象 由“<input type="button">”指定。引用一个 Button 对象，可以使用“<文档对象>.<表单对象>.<按钮名称>”。<按钮名称>指在<input>标记中的“name="..."”属性的值。引用任意表单元素都可以用这种方法。
属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定用<input value="...">指定的元素的值。
form 返回包含本元素的表单对象。方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。事件
onclick; onmousedown; onmouseup
Checkbox 复选框对象 由“<input type="checkbox">”指定。
属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定用<input value="...">指定的元素的值。
form 返回包含本元素的表单对象。
checked 返回/设定该复选框对象是否被选中。这是一个布尔值。
defaultChecked 返回/设定该复选框对象默认是否被选中。这是一个布尔值。方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。事件
onclick
elements[]; Element 表单元素对象 <表单对象>.elements 是一个数组，包含了该表单所有的对象。一般我们不用该数组，而直接引用各个具体的对象。
Hidden 隐藏对象 由“<input type="hidden">”指定。
属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定用<input value="...">指定的元素的值。
form 返回包含本元素的表单对象。
Password 密码输入区对象 由“<input type="password">”指定。
属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定密码输入区当前的值。
defaultValue 返回用<input value="...">指定的默认值。
form 返回包含本元素的表单对象。方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
select() 选中密码输入区里全部文本。事件
onchange
Radio 单选域对象 由“<input type="radio">”指定。一组 Radio 对象有共同的名称（name 属性），这样的话，document.formName.radioName 就成了一个数组。要访问单个 Radio 对象就要用：document.formName.radioName[x]。
单个 Radio 对象的属性
name 返回/设定用<input name="...">指定的元素名称。
value 返回/设定用<input value="...">指定的元素的值。
form 返回包含本元素的表单对象。
checked 返回/设定该单选域对象是否被选中。这是一个布尔值。
defaultChecked 返回/设定该对象默认是否被选中。这是一个布尔值。方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。
click() 模拟鼠标点击该对象。事件
onclick
Reset 重置按钮对象 由“<input type="reset">”指定。因为 Reset 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onreset 代替。
Select 选择区（下拉菜单、列表）对象 由“<select>”指定。
属性
name 返回/设定用<input name="...">指定的元素名称。
length 返回 Select 对象下选项的数目。
selectedIndex 返回被选中的选项的下标。这个下标就是在 options[] 数组中该选项的位置。如果 Select 对象允许多项选择，则返回第一个被选中的选项的下标。
form 返回包含本元素的表单对象。方法
blur() 从对象中移走焦点。
focus() 让对象获得焦点。事件
onchange
options[]; Option 选择项对象 options[] 是一个数组，包含了在同一个 Select 对象下的 Option 对象。Option 对象由“<select>”下的“<options>”指定。
options[] 数组的属性
length; selectedIndex 与所属 Select 对象的同名属性相同。
单个 Option 对象的属性
text 返回/指定 Option 对象所显示的文本
value 返回/指定 Option 对象的值，与<options value="...">一致。
index 返回该 Option 对象的下标。对此并没有什么好说，因为要指定特定的一个 Option 对象，都要先知道该对象的下标。这个属性好像没有什么用。
selected 返回/指定该对象是否被选中。通过指定 true 或者 false，可以动态的改变选中项。
defaultSelected 返回该对象默认是否被选中。true / false。
Submit 提交按钮对象 由“<input type="submit">指定。因为 Submit 也是按钮，所以也有 Button 对象的属性和方法。至于“onclick”事件，一般用 Form 对象的 onsubmit 代替。
Text 文本框对象 由“<input type="text">”指定。Password 对象也是 Text 对象的一种，所以 Password 对象所有的属性、方法和事件，Text 对象都有。
Textarea 多行文本输入区对象 由“<textarea>”指定。Textarea 对象所有的属性、方法和事件和 Text 对象相同，也就是跟 Password 对象一样。
images[]; Image 图片对象 document.images[] 是一个数组，包含了文档中所有的图片（<img>）。要引用单个图片，可以用 document.images[x]。如果某图片包含“name”属性，也就是用“<img name="...">”这种格式定义了一幅图片，就可以使用“document.images['...']”这种方法来引用图片。在 IE 中，如果某图片包含 ID 属性，也就是用“<img id="...">”这种格式定义了一幅图片，就可以直接使用“<imageID>”来引用图片。
单个 Image 对象的属性
name; src; lowsrc; width; height; vspace; hspace; border 这些属性跟<img>标记里的同名属性是一样的。在 Netscape 里，除了 src 属性，其它属性（几乎全部）都不能改的，即使改了，在文档中也不能显示出效果来。这些属性最有用的就是 src 了，通过对 src 属性赋值，可以实时的更改图片。
事件
onclick
不显示在文档中的 Image 对象
不显示在文档中的 Image 对象是用 var 语句定义的：
var myImage = new Image(); 或
var myImage = new Image(<图片地址字符串>);然后就可以像一般 Image 对象一样对待 myImage 变量了。不过既然它不显示在文档中，以下属性：lowsrc, width, height, vspace, hspace, border 就没有什么用途了。一般这种对象只有一个用：预读图片(preload)。因为当对对象的 src 属性赋值的时候，整个文档的读取、JavaScript 的运行都暂停，让浏览器专心的读取图片。预读图片以后，浏览器的缓存里就有了图片的 Copy，到真正要把图片放到文档中的时候，图片就可以立刻显示了。现在的网页中经常会有一些图像连接，当鼠标指向它的时候，图像换成另外一幅图像，它们都是先预读图像的。
预读图像的 JavaScript 例子
var imagePreload = new Image();
imagePreload.src = '001.gif';
imagePreload.src = '002.gif';
imagePreload.src = '003.gif';以上例子适合预读少量图片。
function imagePreload() {
var imgPreload = new Image();
for (i = 0; i < arguments.length; i++) {
imgPreload.src = arguments[i];
}
}imagePreload('001.gif', '002.gif', '003.gif', '004.gif', '005.gif');
