查人人中国名人网家乡的发展变化ppt:浏览器对象中的document如何使用?
来源：百度文库 编辑：查人人中国名人网 时间：2024/04/29 07:21:45
使用浏览器对象
1.文档对象模型
文档对象模型(Document Obiect Model，简称DOM)是用于表示HTML元素以及Web浏览器信息的一个模型，它使脚本能够访问Web页上的信息，并可以访问诸如网页位置等特殊信息。通过操纵文档对象模型中对象的属性并调用其方法，可以使脚本按照一定的方式显示Web页并与用户的动作进行交互。
对于不同的脚本语言，通常都具有一个DOM的子集，以便在特定的脚本语言中实现对象模型。例如，JavaScript在其语言中就有一个对象模型。对于Intemet Explorer，Microsoft公司专门为其创建了一个对象模型。使用为浏览器创建对象模型的方式使得对象模型与语言无关，从而可以获得更强的可扩展性。
JavaScript对象模型和IE对象模型非常相象，它们包含相似的对象和事件，反映了如图所示的对象层次结构：
window.....document....anchor,applet,area,embed,image,link,
form........button,checkbox,fileupload,
hidden,option,password,fadio,reset,select
submit,text,textarea
.....event,fraem,history,location,screen,
navigator....mimetype,plugin
在该层次结构中，最高层的对象是窗口对象(window)，它代表当前的浏览器窗口；之下是文档(document)、事件(event)、框架(frame)、历史(history)、地址(location)、浏览器(navigator)和屏幕(screen)对象；在文档对象之下包括表单(form)、图像(image)和链接(1ink)等多种对象；在浏览器对象之下包括MIME类型对象(mimeType)和插件(plugin)对象；在表单对象之下还包括按钮(button)、复选框(checkbox)、文件选择框(fileUpload)等多种对象。
了解了浏览器对象的层次结构之后，我们就可以用特定的方法引用这些对象，以便在脚本中正确地使用它们。
在JavaScript中引用对象的方式与典型的面向对象方法相同，都是根据对象的包含关系，使用成员引用操作符(.)一层一层地引用对象。例如，如果要引用document对象，应使用window.document；如果要引用location对象，应使用window.location。由于window对象是默认的最上层对象，因此引用它的子对象时，可以不使用window.，也就是说，可以直接用document引用document对象，用location引用location对象。
当引用较低层次的对象时，一般有两种方式——使用对象索引或使用对象名称(或ID)。例如，如果要引用文档中的第一个表单对象，则可以用document.forms[0]来引用；如果该表单的name属性为 form1 (或者 ID属性为 form1)， 则可以用document.forms["form1"]或直接用document.form1来引用该表单。同样，如果在名称为form1的表单中包括一个名称为myText的文本框，则可以用document.form1.myText来引用该文本框对象。
说明：由于name和ID属性的值使用相同的名字空间， 因此最好只使用其中一种，以免造成混淆。也就是说，在FORM标记符中，最好只指定name属性和ID属性中的一种，并且不论是名称还是ID，都不能重复。
对应于不同的对象，通常还有一些特殊的引用方法。例如，如果要引用表单对象中包含的对象，可以使用elements数组；如果要引用文档对象中包含的某个标记符对象(例如 P 对象)，可以使用document对象的all属性，等等。
2.document对象
document对象代表当前浏览器窗口中的文档，使用它可以访问到文档中的所有其他对象(例如图像、表单等)，因此该对象是实现各种文档功能的最基本对象。
1.document对象的常用属性
document对象最常用的属性如下：
all 表示文档中所有HTML标记符的数组；
bgcolor 表示文档的背景颜色；
forms 表示文档中所有表单的数组；
title 表示文档的标题。
例如，以下示例显示了all属性和bgcolor属性的用法，效果...
<HTML>
<HEAD>
<TITLE>动态更改背景颜色</TITLE>
<SCRIPT language="JavaScript" type="text/javascript">
<!--
function changeBGColor()
{ document.bgColor=document.all.myForm.myBGColor.value; }
// -->
</SCRIPT>
</HEAD>
<BODY>
<H2>请在文本框中输入十六进制颜色值
（例如：#00ffff），然后单击"变！"按钮：</H2>
<FORM name="myForm">
<INPUT name="myBGColor" value="#ffffff"><P>
<INPUT type="button" value="变！" onclick="changeBGColor()"><P>
</FORM>
</BODY>
</HTML>
2.document对象的常用事件
在客户端脚本中，JavaScript通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能(例如，单击按钮弹出对话框，鼠标移动到文本上后文本变色等)。
实际上，事件(event)在此的含义就是用户与Web页面交互时产生的操作。当用户进行单击按钮等操作时，即产生了一个事件，需要浏览器进行处理。浏览器响应事件并进行处理的过程称为事件处理，进行这种处理的代码称为事件响应函数。
在前面我们已经多次见过onclick事件，它表示鼠标单击时产生的事件。对于document对象来说，还有两个非常常用的事件，即：onload和onunload，分别在文档装载完毕和卸载(或从当前页跳转到其他页)完毕时发生。
以下示例显示了这两个事件的作用(当进入页面时，显示“欢迎光临”对话框；退出网页时，显示“谢谢惠顾”对话框)。效果...
<HTML>
<HEAD>
<TITLE>处理加载卸载事件</TITLE>
</HEAD>
<BODY onload="alert('欢迎光临!')" onunload="alert('谢谢惠顾!')">