VBS文档对象模型.doc

文档对象模型（DOM）文档对象模型（DOM）属于VBScript客户端扩展部分，在文档对象模型中提供了大量的对象，这些对象应用于浏览器上，这些对象在我们编写脚本时发挥着重要的作用。当用户在浏览器中打开一个页面时，浏览器就会自动创建文档对象模型中的一些对象，这些对象存放了HTML页面的属性和其他的相关信息，因为这些对象在浏览器上运行，所以我们有时也称之为浏览器对象。浏览器对象的层次图如图3-10所示，这个文档对象模型是Navigator的文档对象模型。 图3-10 文档对象模型（DOM）在这个层次图中，每个对象都是它的父对象的属性。例如，Window对象是Document对象的父对象，所以在引用Document对象时使用Window.Document。在这里，Document对象也就是Window对象的属性。对于每一个页面，浏览器都会自动创建Window对象、Document对象、Location对象、Navigator对象、History对象。而基于这个层次结构，还可以创建其他对象。例如，如果在页面中有一个表单对象（名称为MyForm），那么在引用MyForm对象时，就可以使用Window.Document.MyForm。在这里可以看出，Document对象是Window对象的属性，而如果页面中存在form对象，那么，form对象也是Document对象的属性。在VBScript中如果要引用某个对象的属性，必须通过整个对象属性的完整路径来进行引用，也就是说，必须指明这个对象的属性的所有父对象。例如，假如在页面上表单对象的名称为MyForm，而在表单中有个文本框，名称为MyTextBox，而我们希望能够获取这个文本框中的字符串，那么必须从最高一级对象Window对象开始引用。引用方式如下所示：Window.Document.MyForm.MyTextBox.value。362 Windows对象Window对象在VBScript浏览器对象的层次图中位于最高一层，具有唯一性，只要浏览器窗口打开，即使在浏览器中没有加载任何页面，VBScript中同样也会建立Window对象。所以，它也就具有许多和其他浏览器对象不同的属性和方法。1Window对象的属性Window对象中存放的是浏览器整个窗口的属性，包括各种工具条的设置、浏览器的外观设置以及Document对象、History对象、Location对象等内容，对Window对象的属性逐个进行详细介绍是很难的，下面我们对Window对象的属性分类进行简要的介绍。（1）Closed、Opener属性Closed属性可以判断一个窗口是否已经被关闭；通过Opener属性可以通过一个窗口来操纵它的父窗口。当一个窗口打开另外一个窗口后，它们之间的关系并不是如同Frame结构一样紧密，它们只是通过Opener属性，子窗口可以和父窗口发生联系，而通过Open()方法的返回值，父窗口可以和子窗口发生联系，这样两个相关的窗口之间就可以实现互操作。例如，以下例题先建立一个弹出窗口，通过Opener属性可以获取父窗口的属性信息，下述语句可以显示父窗口的名称：例3-41 Opener属性使用示例以下是弹出窗口的代码（应命名为tan.htm）：sub Closeit() setTimeout self.Close(),10000 End sub这是一个测试文件，用于测试文件的自动打开与关闭。父窗口的名称（2）defaultStatus、status属性defaultStartus属性的值是在浏览器窗口下面的状态栏中缺省显示的信息，status属性的值是状态栏中当前显示的信息。例如，将浏览器状态栏的当前显示的信息通过对话框反馈给用户：测试Window对象的status属性的用法（3）Document、History、Location属性Document属性、History属性、Location属性就是浏览器对象中的Document对象、History对象、Location对象，下面分别对这些对象进行介绍。2Window对象的方法Window对象有很多方法，下面我们介绍最常用的几种方法。（1）Open(页面地址，窗口名称，窗口风格)和Close()方法Open()方法能够打开一个窗口，并且，在打开窗口的时候，还能够指定窗口的风格，Open()方法返回的是窗口的引用，它有3个参数：页面地址、窗口名称和窗口风格，窗口风格中可以指定浏览器是否具有toolbar（工具栏）、Location（地址栏）、directories（目录按钮）、status（状态栏）、menubar（菜单条）、scrollbars（滚动条），它们可以设置为yes或no，窗口风格也可以指定浏览器窗口的width（宽）和height（高）。Close()方法可以自动关闭一个窗口，例如刚才我们打开的myWindow对象，可以通过Close()方法关闭：myWindow.Close()例如，我们打开一个窗口，页面是hello.htm，窗口高400，宽400，有工具栏、地址栏、目录按钮，而没有状态栏、菜单条和滚动条，则代码如下所示：打开一个新窗口关闭窗口例3-42 Window对象Opent和Close方法的使用示例（2）alert(字符串)这种方法将在以后广泛使用。alert()方法的功能是弹出一个警告框，在警告框内显示字符串文本，通常，在给用户某些警告信息的时候使用，例如，在IE浏览器内运行alert(你好!)后警告框如图3-11所示。 图3-11警告框3Window对象的事件Window对象的事件有9种，较常用的有OnLoad、OnUnLoad、OnFocus、OnScroll。在装载一个HTML页时会运行Window对象的OnLoad事件。要使用该事件，既可创建一个命名为Window_OnLoad的过程，也可向标记中添加OnLoad属性（例3-30）。Sub Window_OnLoad StrName=Window.Prompt(请输入姓名) Window.Alert Hello & strNameEnd Sub 363 Document对象Document对象代表的是当前的整个页面，所以在Document对象中存储着当前页面的一些信息，包括页面的前景色和背景色，也包括了页面中的表单、锚标、图象等对象，运用Document对象，我们还能够向页面中动态添加文本以及各种标签。1Document对象的属性Document对象的属性非常丰富，下面我们分类进行简单介绍。（1）alinkColor、vlinkColor、bgColor、fgColor和linkColor属性这些属性是页面的颜色设置。bgColor是页面的背景颜色，fgColor是页面的前景颜色（也就是文本的颜色），linkColor是超链接的颜色，alinkColor是鼠标单击中的超链接的颜色，vlinkColor是已经访问过的超链接的颜色，这些属性和标签中定义的各种属性相对应。在这里设置颜色时，颜色应该以&hrrggbb形式表达，其中，&h代表颜色是以16进制表达的，而rr代表着红色的深浅程度，gg代表着绿色的深浅程度，bb代表着蓝色的深浅程度。其他各种颜色都是通过这三种颜色组合而成，颜色深浅程度以16进制整数表示，范围从00到ff，如果要设置颜色为绿色，则颜色应该表达成&h00ff00。例如，运用bgColor属性，我们可以在页面中定义一个按钮，鼠标单击按钮后将页面的背景颜色设置成为黑色，代码如例3-43所示。Doeument 例3-43 通过bgColor设置页面的背景色（2）Title属性Title属性中存储的是页面的标题，也就是在标签中所定义的标题。我们可以通过如下所示的代码设置页面的标题为Welcome：Document.Title=欢迎光临（3）anchors、applets、forms、images、frames属性这些属性中存放着对象的数组，页面中所有的超链接存储在links数组中，锚点则存储在anchors()数组中，表单存储在forms()数组中，图象存储在image()数组中，所有的frame存储在frames()数组中，并可用length属性来判断它们的长度。如果在页面中只定义了一个表单，那我们可以通过Document.forms(0)来引用这个表单对象，以下举一个例子来说明其用法：请输入数据： 链接到第一个文本链接到第二个文本链接到第三个文本 第一锚点第二锚点第三锚点 Document.Write 文档有 & Document.links.length & _个链接& Document.Write 文档有 & Document.anchors.length & _个锚点&Document.Write 文档有 & Document.forms.length & 个窗体 例3-44 Document属性的用法2Document对象的方法（1）Write()方法在前面的内容中，我们已经使用过Write()方法，Write()方法的功能就是向页面内写入文本或者标签，其实，这些功能似乎都可以直接在HTML页面中完成，而不需要Script，但是，运用Script，可以完成一定的运算工作然后显示结果，这一点是HTML做不到的。（2）Open()和Close()方法Open()方法的功能就是打开一个新文档，而Close()方法的功能就是关闭当前文档。364 History对象在用户在网上浏览时，浏览器中维护着一个用户最近访问过的URL地址数组，通过 History对象，我们可以获得最近访问过的URL地址。而且，运用History对象的back()、 forward()方法，我们能够获得和浏览器工具栏中的“后退”、“前进”按钮相同的效果。借助于History对象，我们可以获取浏览器访问过地址的信息。1History对象的属性Navigator浏览器和IE浏览器对于History对象的属性不完全兼容，它们有一个相同的属性length 属性，在length属性中记录当前浏览器访问历史记录的数量，例如，我们可以通过下面的VBScript代码将浏览器访问的历史记录数量显示到HTML页面上：Window.Document.Write(You have visited & History.length & sites)2History对象的方法History对象的back()方法可以载入历史记录中前一个历史记录的URL地址，forward() 方法可以载入历史记录中下一个历史记录的URL地址，go()方法可以载入历史记录中任何 一个历史记录的URL地址。例如，在下面的页面中，我们运用两个按钮，可以实现浏览器中的“后退”、“前进”按钮的功能，VBScript代码如例3-45所示。History 例3-45 运用History对象实现浏览器中“后退”、“前进”按钮的功能go()方法有一个参数，代表载入历史记录列表中相对位置的历史记录，例如go(-1)则代表载入前一条历史记录，它和back()方法的功能是一致的，go(1)代表载入后一条历史记录，它和forward()方法的功能是一致的。365 Navigator对象Navigator对象中存储着关于浏览器版本和浏览器运行平台的一些信息，由于各种浏览 器之间还存在着不完全兼容性，而且，用户所使用的浏览器版本也有差异，所以，在建立网站的时候，有时候有必要建立多个不同版本的网页，以适应不同浏览器的需要，在这里就需要运用Navigator对象进行判断。通过Navigator对象的属性，我们可以获得浏览器和运行平台的信息，下面我们对Navigator对象的属性进行简单介绍。（1）appName属性。通过Navigator对象的appName属性可以获得浏览器的名称，例如，当在IE浏览器中运行脚本Navigator.appName，获得浏览器名称为Microsoft Internet Explorer。例如，我们可以通过Navigator对象判断浏览器的名称，将浏览器分为三类：Netscape、Internet Explorer和Other，则VBScript代码如例3-46所示。Navigator!-If (Navigator.appName=Netscape) then Window.Document.Write(Netscape)elseIf (Navigator.appName=Microsoft Internet Explorer) then Window.Document.Write(Internet Explorer)else Window.Document.Write(Others)End IfDocument.Write Document.Write Navigator.appVersionDocument.Write Document.Write Navigator.userAgent - 例3-46 通过Navigator对象判断浏览器名称（2）appCodeName属性。通过appCodeName属性可以获得浏览器代码名称，对于IE浏览器，它的代码名称为Mozilla。（3）appVersion属性。通过appVersion属性可以获得浏览器的版本信息以及浏览器运行平台 的信息，例如，在Windows NT4.0下运行的IE5.0浏览器中，Navigator.appVersion返回值为4.0（compatible;MSIE5.0;Windows NT）。（4）userAgent属性。在HTTP协议中，客户端向服务器端请求时，会发出一段USER-AGENT信息，Navigator对象的userAgent属性值就是USER-AGENT信息，可以获得浏览器及所在操作系统的信息，这个属性和其他属性比起来，获得的信息要全面得多。例如，Window NT 4.0下运行的IE5.0浏览器中，navtgator.appVersion的返回值为Mozilla/4.0（compatible;MSIE 5.0;Windows NT），其中可以看出，同时包含了浏览器信息、操作系统信息和浏览器代码名称。366 Form对象一个表单隶属于一个文档，对于表单对象的引用可以通过使用隶属文档的表单数组进行引用，即使在只有一个表单的文档中，表单也是一个数组的元素，其引用形式如下：Document.forms(0)注意：表单数组引用是采用form的复数形式forms，数组的下标总是从0开始。在对表单命名后，也可以简单地通过名称进行引用，比如，如果表单的名称是MyForm，则引用形式如下所示：Document.MyForm如果在一个表单中有多个表单元素具有相同的名称，那么，VBScript会自动创建一个数组来存放这些元素，数组中的每个元素代表一个表单元素。例如，在一个表单中有一个文本框和一个文本区名称都是MyName，那么MyName(0)和MyName(l)分别代表文本框和文本区，数组的下标从0开始，表单元素的下标和它们在表单中出现的顺序是一致的。1表单对象的属性、方法与事件表单对象的属性、方法与事件如表3-17所示，有关它们的具体解释我们随后马上展开。表3-17 表单对象的属性、方法与事件属性方法事件actionHandleEvent()OnResetelements()Reset()OnSubmitencodingSubmit()lengthmethodnametarget2属性（1）actionaction属性指明了通讯的HTTP服务器的ASP程序的URL地址。例如：Document.forms(0).action=/MyWeb/test.asp（2）method一个表单的method取值可以是GET或者POST，method的值说明了访问HTTP服务器的访问方法。（3）namename属性指明了表单的名称，可以通过name属性的值对表单进行引用。（4）targettarget属性在Frame结构下发挥了重要的作用。在Frame结构下，有时会希望保留交互表单的Frame部分，而使用另外的Frame部分进行浏览。target属性指明了响应页面应该在Frame的哪一部分进行显示。target属性值可以是窗口名称或者Frame名称，分别代表用以显示反馈信息的窗口或者Frame。例如，假设在Frame结构中，使用frameLeft进行交互查询，使用frameRight进行浏览，则可以对target属性进行设置：Document.forms(0).target=frameRight3方法方法共有2种情况。（1）reset()reset()方法将表单中所有元素值重新设置为缺省状态，如果在表单中定义了Reset按钮，那么，reset()方法执行后的效果与单击Reset按钮的效果是相同的。（2）submit()submit()方法将表单数据发送给服务器的ASP程序处理，如果在表单中定义了Submit按钮，则submit()方法执行后的效果与单击Submit按钮效果是相同的。 图3-12 用图片代替按钮示例例如，在生动活泼的Web页面中，使用美观的图片代替Reset按钮和Submit按钮往往会取得更好的效果，在这里，就需要使用到reset()方法和submit()方法，如例3-47所示。注册请输入你的姓名性别先生女士例3-47 使用reset()方法和submit()方法利用美观的图片代替Reset按钮和Submit按钮367 文本框对象文本框对象是表单中接收用户输入数据的主要媒介，由于文本框对象中输入文本的内容千变万化，往往需要对文本框中输入数据进行数据有效性验证，特别是对于整数和实数的输入也往往使用文本框，对于这一类型的输入，有效性验证则更为必要。1文本框对象的属性、方法和事件文本框对象的属性、方法和事件如表3-18所示，后面我们会详细介绍它们。 表3-18文本框对象的属性、方法和事件属性方法事件DefaultValueBlur()OnBlurFormFocus()OnChangeNamehandleEvent()OnFocusTypeselect()onKeyDownValueOnKeyPressOnKeyUpOnSelect2属性文本框对象的属性共有下述5种。（1）defaultValuedefaultValue的属性值是文本框中缺省的文本信息。（2）formform属性反映了包含该文本框的表单。通过文本框的form属性可以对表单进行引用。（3）namename属性即为文本框的名称。（4）typetype属性指明了表单元素的类型，文本框的type属性值是text。（5）valuevalue属性就是文本框的当前输入信息，即文本框中当前正在显示的文本。例如，假设表单中有一个文本框，名称为Upper，在表单数据提交前要先将Upper中的文本全部转化为大写文本；那么，我们可以先定义ToUpper()函数，ToUpper ()函数将文本框中文本转换为大写文本。在提交之前先调用ToUpper()函数进行处理：请输入非负数字例3-48 将小写字母转换成大写字母3方法（1）blur()blur()方法可以释放表单元素的输入焦点，对于文本框而言，blur()方法的执行会取消文本框内文本的选顶，并且在文本框中的文本插入指针也会离开文本框。例如，表单中有一个文本框，名称为Modify，可以使用blur()方法使之失去输入焦点；Document.forms(0).Modify.blur()（2）focus()focus()方法和blur()方法相反，会使得表单元素获得输入焦点，对于文本框而言，focus() 方法的执行会使得文本插入指针处于文本框中。在提交表单数据前需要进行数据有效性验证，而一旦数据有效性验证失败后，用户往往需要对输入有误的表单元素进行修改，这样，就有必要将输入焦点置于输入有误的表单元素上，使得用户能够直接进行修改，而不必先在表单中找到需要修改的表单元素，从而可以便于用户的操作，这对于长表单的输入是十分有意义的。（3）select()select()方法使得文本框中文本被选中，即突出显示文本框中的文本。在数据有效性验证失败后，先使用focus()方法将焦点置于输入有误的表单元素上，如果表单元素是文本框，则往往也需要将文本框中的文本选中，这样，用户可以按Delete键直接删除文本框中输入有误的数据，这样，也可以有效地简化用户的操作步骤。我们用例3-49说明，在文本框中要求输入一个非负整数，如果有效性验证失败后则使文本框获得焦点，并且文本框中的输入数据被选中。请输入非负数字!-function check() for i=1 to len(trim(Document.forms(0).number.value) c=mid(trim(Document.forms(0).number.value),i,1) If(c9) then alert (请输入非负数字) Document.forms(0).number.focus() Document.forms(0).number.select() exit for else Document.forms(0).submit End If nextEnd function-请输入非负的数字 例3-49 数据有效性验证失败后文本框获得焦点，其中输入数据被选中4事件（1）OnBlur在文本框失去焦点时，触发OnBlur事件。如果需要对某个文本框的输入数据进行严格的数据有效性验证，可以在OnBlur事件处理函数中检验，对例3-49中我们进行如下修改：这样，一旦当名称为number的文本框失去焦点后立刻进行校验，如果不是合法的整数，则将焦点重新设置到number文本框中，那么在该文本框中根本就不可能输入不合法的数据，否则文本框就不能失去焦点，当然也就不可能提交表单数据了。（2）OnChangeOnChange事件和OnBlur事件相似，都要在失去焦点之后触发，不同之处在于，只有当用户修改了文本框中的文本，然后失去焦点后才触发，如果用户没有修改文本，失去焦点 时是不会触发OnChange事件的，同样可以在OnChange事件处理函数中进行数据有效性验证，在例3-49可以进行如下修改：和OnBlur不同，在OnChange事件处理函数中进行校验不会把焦点强制定于该文本框 中，如果在number文本框中输入了不合法的数据，出现警告对话框后会将焦点重新设置到number文本框中，此时如果不进行任何改动，可以将焦点移动到其他表单元素上而不再次触发OnChange事件处理函数。建议不要使用OnBlur事件处理函数中进行数据有效性验证，而是使用OnChange事件处理函数中进行验证，然后在表单提交时再进行一次验证，这样可以给予用户较大的自由。（3）OnFocus当文本框得到焦点时，触发OnFocus事件。（4）OnSelect当文本框中文本被选定时，触发OnSelect事件。（5）OnKeyDown文本框在获得焦点的状态下，用户按下一个键时触发OnKeyDown事件。（6）OnKeyUp文本框在获得焦点的状态下，用户松开一个键时触发OnKeyup事件。（7）OnKeyPress文本框在获得焦点的状态下，用户按键动作完成之后出发OnKeyPress事件，所以在用户按键的过程中先触发OnKeyDown事件，然后触发OnKeyUp事件，在OnKeyDown事件和OnKeyUp事件匹配完成之后触发OnKeyPress事件。这样，就可以修改例3-49，在例3-49中的校验方式是对于输入文本进行校验，这是一种被动的校验方式，其实可以考虑采用一种更加主动的校验方式，通过编写OnKeyPress事件处理函数后，可以保证在文本框中只能输入数字，而屏蔽了其他按键，这样同样保证了在number文本框中只能输入数字。如例3-50所示（该例使用了多个事件，建议读者将其分开一个一个测试）。请输入非负数字!-function init() Document.forms(0).number.value=请输入非负数字 Document.forms(0).number.select()End functionfunction clear() Document.forms(0).number.value=End functionfunction inputed() for i=1 to len(trim(Document.forms(0).number.value) c=mid(trim(Document.forms(0).number.value),i,1) If(c9) then alert (请输入非负数字) Document.forms(0).number.focus() Document.forms(0).number.select() exit for End If nextEnd functionfunction check() charstr=Document.forms(0).number.value If not isnumeric(charstr) then alert 请输入非负数字 else Document.forms(0).submit End If End function-请输入非负的数字 例3-50 通过屏蔽非数字按键主动进行校验5口令对象口令对象和文本框对象十分相似，不同之处只在于在口令对象中，输入文本不会直接显示出来，而是以星号代替。它的属性、方法与事件和文本框对象是一致的。不过，它的type属性值为password。6文本区对象虽然文本区对象和文本框对象在HTML格式上有较大的差异（文本区对象使用标签，而文本框对象使用标签），但从VBScript的角度来看，它们在属性、方法与事件上是一致的，不同之处只是文本区对象的type属性值为textarea。7隐藏对象隐藏对象是一个比较特殊的对象，它并不在表单中显示出来。除了隐藏对象的type属性值为hidden之外，隐藏对象和文本框对象在属性上是一致的，但隐藏对象没有方法可以调用，也没有事件产生。所以，一般不对隐藏对象进行编程控制，隐藏对象大多用于在表单数据提交时传递数据。例如，可以将文本框的输入数据进行转换后存放在隐藏对象中，然后程序通过访问隐藏对象就可以直接获取转换后的数据。368 按钮对象1按钮对象的属性、方法和事件按钮对象的属性、方法和事件如表3-19所示，随后我们将讲解它们的详细内容。表3-19 按钮对象的属性、方法和事件属性方法事件formbtur()OnBlurnameclick()OnClicktypefocus()OnFocusvaluehandleEvent()OnMouseDownOnMOuscUp2属性（1）formform属性反映了包含该按钮的表单。（2）namename属性即为按钮的名称。（3）type按钮的type属性值为button。（4）valuevalue属性就是显示在按钮上的文本。可以通过修改按钮的value属性值给HTML页面带来动感，并且在不同的状态下可以给予用户不同的提示信息。例如，我们可以设计一个按钮，在单击后在On和Off状态之间不断地翻转。下面是使得按钮状态翻转的函数；例3-51 onoff按钮的Value属性示例3方法blur()方法可以释放按钮的焦点；按钮的click()方法可以模仿按钮的单击动作，但并不触发按钮的OnClick事件处理函数；而focus()方法则可使按钮获得焦点。4事件（1）OnBlur当按钮失去焦点时，触发OnBlur事件。（2）OnClick当鼠标单击按钮时，触发OnClick事件，OnClick事件是OnMouseDown事件和OoMouseUp事件的结合，鼠标单击按钮时，先触发OnMouseDown事件，然后触发OnMouseUp事件，最后触发OnClick事件。一般处理鼠标单击按钮时，使用OnChick事件处理函数。在进行客户端数据验证时，需要用Button按钮的OnChick事件。例如，单击按钮时出现hello对话框：（3）OnFocus当按钮获得焦点时，触发OnFocus事件。（4）OnMouseDown当鼠标单击按钮时，在按下鼠标时，触发OnMouseDown事件。（5）OnMouseUp当鼠标单击按钮时，在松开鼠标时，触发OnMouseUp事件。5Submit按钮对象Submit按钮对象是一种比较特殊的按钮，和一般的按钮比起来，Submit按钮对象的type属性是submit，而不是button，单击Submit按钮后会将表单数据向服务器器程序发送。不过，一般进行数据有效性验证时，使用Button按钮，而不使用Submit 按钮。6Reset按钮对象Reset按钮对象也是一种比较特殊的按钮，和一般的按钮比起来，Reset按钮对象的type属性是reset，而不是button，单击Reset按钮后会将表单中所有元素恢复为缺省值。369单选框对象和复选框对象1单选框的属性、方法和事件使用单选框时，一组单选框采用相同的名称，这样在一个时刻，一组单选框中只能选择一项。在VB