第8章 Document对象.docVIP

第 8 章 Document 对象 Document 对象在顶级对象模型中占据非常重要的地位，它可以更新正在装入和已经装 入的文档，并使用 JavaScript 脚本访问其属性和方法来操作已加载文档中包含的 HTML 元素， 如表单 form、单选框 radio、下拉框 checkbox 等，并将这些元素当作具有完整属性和方法的 元素对象来引用。本章将重点讲述顶级对象模型中 Document 对象及与其相关的 body 元素 对象的基础知识，如对象的创建、引用及与其它 HTML 元素对象之间的相互关系等。 8.1 对象模型参考 客户端浏览器载入目标 HTML 文档后，在创建顶级对象模型中其它顶级对象的同时， 创建 Document 对象的实例，并将该实例指向当前的文档。当文档包含多个框架组成的框架 集或者在该文档中由iframe和/iframe标记对引入其它外部文档时，当前浏览器窗口就同 时包含了多个 Document 对象。Web 程序开发人员根据对象之间的相对位置关系使用 JavaScript 脚本进行相关操作如对象定位、访问等。 Document 对象在文档结构模型中处于顶级层次，但较之如 Window 等其它顶级对象而 言，该对象与客户端浏览器的关联程度比较小，而与所载入文档本身的关联程度较为紧密。 图 8.1 从 Document 对象的角度出发，显示了它在文档对象模型的参考层次中所处的相对位 置（NN4+和 IE4+文档结构模型通用）： 图 8.1 Document 对象模型参考 在上述的对象模型参考中，灰色表示的是 DOM 中的顶级对象，而 Document 对象所在 层次之下的对象为目标文档包含的 HTML 元素对象。可见在文档中定位了 Document 对象之 后，就可根据对象的层次关系操作其层次之下任意的元素对象。 注意：上面描述的对象模型中 frames 分别作为顶级对象和 Document 对象包含的元素对象而存在，因为 当某文档包含框架集时，frames 对象作为该文档对应的 Document 对象的元素对象而存在。当框 架集中某个框架载入另一个文档时，该文档对应的 Document 对象又作为 frames 对象下一层次的 对象而存在。 8.2 Document 对象 Document 对象包括当前浏览器窗口或框架内区域中的所有内容，包含文本域、按钮、 单选框、复选框、下拉框、图片、链接等 HTML 页面可访问元素，但不包含浏览器的菜单 栏、工具栏和状态栏。 Document 对象提供多种方式获得 HTML 元素对象的引用，如在某目标文档中含有多个 通过form和/form标记对引入的表单，则可通过如下方式获得对该文档中 forms 对象数 组长度信息的引用： document.forms.length document.getElementsByTagName(form).length 获取了对象数组信息后，就可以根据目标文档中该类型对象的相对位置定位某对象，如 循环检索 forms 数组各表单的 name 属性的代码： var MyForms=document.forms; for(i=0;iMyForms.length;i++) { msg+=forms[ +i+ ].name : +MyForms[i].name+ \n; } 代码运行后，将根据 forms 对象数组的长度信息遍历该数组并输出各表单 name 属性值。 8.2.1 获取目标文档信息 浏览器载入目标文档后，将根据文档标记的类型产生该类型的对象数组，并以标记元素 载入的时间顺序进行数组下标分配。考察如下获取 Document 对象信息的代码，其中框架集 文档“main.html”代码如下： //源程序 8.1 html head titleSample Page!/title /head frameset name=MyFrameset border=3 borderColor=black cols=60%,40% frame name=Control src=leftmain.html frame name=Display src=target.html frameBorder=yes borderColor=#c0c0c0 /frameset /html 该框架集文档包含右框架文档“target.html”和左框架文档“leftmain.html”，其中前者 为普通测试文档，而后者为包含链接、图片、插件、表单等 HTML 页面可见元素的文档， 其代码如下： //源程序 8.2 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0//EN /TR/REC-html140/stri