document对象.doc

摘自/bookfiles/226/ 书名：精通Javascript动态网页编程 作者：王俊杰16.2 基本Document方法 / 2006-12-25 17:30:00 图书导读 16.2 基本Document方法8.10 定位符与原义字符8.11 实用举例16.1 早期文档处理16.3 使用Document访问传统HTML元素16.4 DOM中的相关内容16.5 用DOM处理表格Oracle 企业管理器下载进入Oracle最强大的在线支持系统 .doubleclick.ne.用Ajax实现lightbox渐变效果使用 Ajax 技术创建 lightbox 效果 渐变效果、弹出效果和窗口 多核平台多任务Usage Model讨论多核平台多任务Usage Model讨论 /E.16.2 基本Document方法Document对象支持5个方法，用于控制向文档的输出。这5个方法是：clear()、close()、open()、write()与writeln()。在本书中，经常使用document.write()来向文本中输出字符串。本节介绍这些方法的使用。16.2.1 document.write()与document.writeln()这两个方法都向文档中输入字符串，主要区别是：document.writeln()方法会在其输出结果后添加一个换行符（“n”），而document.write()方法则不会。然而，在XHTML中，除非在个别情况下（例如标签或者在中），回车或换行符都会被忽略。因此，一般不会感觉到二者的区别。在代码16.8中，使用标签演示了二者的区别。代码16.8 document.write()与document.writeln()：16.8.htmdocument.write()与document.writeln()document.write()与document.writeln()!- /这一行输出后不会换行 document.write(尽管在pre标签内，但本行结尾不会添加换行符。); /这一行输出后将会换行 document.writeln(而这一行的结尾会添加一个换行符); /这一行输出后同样会换行 document.writeln(现在已经换行。); /这一行中，由于使用了，所以会在此处换行 document.write(总是可以使用 <br> 元素在HTML中进行换行。);/-上面代码的运行结果如图16.14所示。图16.14 运行结果由于document.write()与document.writeln()都可以输出字符串，并可以使用进行换行控制，因此，不必每输出一行就写一个document.write()或document.writeln()语句，可以使用代码16.9中的方法，通过字符串连接将结果一起输出。代码16.9 字符串连接输出：16.9.htm字符串连接输出 字符串连接输出 !- var str = ; /定义一个空字符串 str += This is a very long string.; /向其中添加一句话 /添加XHTML元素标签 str += It has entities like © as well as XHTML tags.; /添加XHTML元素标签 str += We can even include various special characters like; /添加两种转义字符，实现跳格和换行 str += t t tabs or even newlines n n in our string; str += but remember the rules of XHTML may override ttn our efforts; document.write(str); /结果输出 /- 上面代码运行后的显示结果如图16.15所示。图16.15 显示结果16.2.2 其他方法Document对象的其他方法的功能从其名称即可理解：clear()用来清除一个文档中的内容，而close()和open()则分别关闭或打开一个文档，以关闭写入或准备写入。在现代JavaScript浏览器中，不支持clear()方法，并且，当使用document.write()对文档写入完毕后，对文档的写入即关闭。代码16.10是使用close()和open()的例子。代码16.10 document.close()和document.open()：16.10.htmdocument.close()和document.open() document.close()和document.open()这是原来的窗口 !- /打开一个新窗口，其宽、高都为300像素 var myWindow = window.open(,newwin, height=300,width=300); myWindow.document.open(); /打开写入 /写入HTML页面头 myWindow.document.write(Test); /写入HTML页面内容 myWindow.document.write(Hello! 这是新打开的窗口); myWindow.document.close(); /关闭输入 /- 上面的代码运行后，在原来窗口的基础上再打开一个新窗口，并在新窗口的文档中写入一段HTML代码。这样在新窗口中就会显示HTML代码的结果。原窗口与新窗口的显示效果如图16.16所示。图16.16 显示效果16.3 使用Document访问传统HTML元素 / 2006-12-25 17:30:00 图书导读 16.3 使用Document访问传统HTML元素8.11 实用举例16.1 早期文档处理16.2 基本Document方法16.4 DOM中的相关内容16.5 用DOM处理表格16.6 DOM应用让架构师真正成为SOA实施领航者采访webMethods公司SOA市场营销部副总裁 关于SOA教育的问题，以及除了IT因素外，SOA教 /新版DB2 V9.5发布！新版DB2 V9.5发布！ 尝鲜体验火爆进行中！ 这里有最精华的多核技术资料你不得不看 /E.16.3 使用Document访问传统HTML元素在JavaScript的最初版本中，定义了Document对象的3种聚集：anchors、forms和links。在以后的版本中，又增加了对applets、embeds、images和plugins的支持。表16-2列出了这些聚集的含义及其兼容性。表16-2 传统的Document聚集名 称描 述浏览器兼容性DOM支持anchors页面中使用定义的所有锚的聚集Netscape 2+与IE 3+DOM 1applets页面中使用定义的所有Java appletsNetscape 3+与IE 4+DOM 1embeds页面中的所有标签Netscape 3+与IE 4+无DOM支持forms页面中使用设置的所有表单Netscape 2+与IE 3+DOM 1images页面中使用定义的所有图像的聚集Netscape 3+与IE 4+DOM 1links页面中使用定义的链接Netscape 2+与IE 3+DOM 1plugins页面中的所有标签。与embeds同义Netscape 3+与IE 4+无DOM支持除上表所列聚集之外，传统的Document对象还支持title属性，在传统的JavaScript中，该属性是只读的，而在现代浏览器中，则可对其值进行设置。16.3.1 锚与链接在XHTML中，锚是一个已命名的链接，使用“”来定义。链接也使用标签来定义，但包含一个href属性，用来指定链接的目标。链接使用“click me!”的形式来定义。很显然，一个链接也可以是一个锚，例如“”既是锚，又是链接。anchors在JavaScript中用处不大，因为只能通过document.anchors.length来访问其length属性。同样的，也可以使用document.links.length来访问links聚集的长度。在绝大多数浏览器中，Llink对象都包含hash、host、hostname、href、pathname、port、protocol与search等属性，这些属性的关系如图16.17所示。图16.17 Link对象各属性的关系当文档载入后，可以改变其中的链接对象，如代码16.11所示。代码16.11 document.links.href：16.11.htm document.links.href document.links.href Test Link !- /显示未改变前的链接目标 document.write(改变前的目标：+document.links0.href); /改变链接目标为 document.links0.href=; /显示改变后的链接目标 document.write(改变后的目标：+document.links0.href); /- 上面代码的运行结果如图16.18所示。图16.18 显示结果16.3.2 表单聚集表单聚集（forms）包含文档中的所有标签，可以通过数字或者名称来引用这些。例如，document.forms0标识文档中的第一个；如果定义了一个表单，就可以通过document.formsmyform或者document.myform对其进行引用。与属性相关的Form对象的属性包括以下几个。 action：表单要提交到的URL。默认为当前文档的地址。 encoding：enctype属性的值。 encType：是一个DOM属性，用来代替传统encoding属性。 method：method属性的值，可以是post或get，默认为get。 name：已定义的表单的名称。 target：要显示表单结果的窗口或框架。16.3.3 表单元素聚集除上一节提到的属性外，Form对象还有一个length属性，可以访问表单域内的字符数。这些表单由、和等来定义，存储在Form对象的elements聚集中。该聚集是一个数组，存储了表单中不同的域，包括：复选框、单选按钮、选择菜单、文本区、文本域、口令域、复位按钮、提交按钮、普通按钮甚至隐藏域。可以使用数字（document.myform.elements0）或名称（document.myform.textfield1）来访问表单元素，要访问表单中元素的数量，可以使用document.formname.length或document.formname.elements.length形式。代码16.12是一个对文本域进行访问的例子。代码16.12 elements：16.12.htm 访问表单元素 访问表单元素 运行上面的代码，在文本域内有一段默认文本，单击“读取域”按钮，会弹出一个对话框，显示文本域的内容。如图16.19所示。关闭该对话框后，单击页面上的“写入域”按钮，文本域中的文本会被替换为“Changed!”。然后再单击“显示属性”按钮，会再次弹出一个对话框，显示该文本域的相关属性。如图16.20所示。 图16.19 显示文本域内容 图16.20 显示文本域的相关属性关于表单对象及其包含元素的详细应用，将在下一章进行介绍。16.3.4 图像聚集在Netscape3浏览器和后来的IE浏览器中，为Document对象增加了一个images聚集，该聚集在DOM中仍然可用。很明显，该聚集包含由XHTML中定义的与图像相关的对象。与其他聚集一样，可以使用数字（document.images0）或名称（document.images myimage）来访问文档中的不同图像。JavaScript的Image对象支持与其XHTML属性关联的一些属性，这些属性包括：border、height、hspace、lowsrc、name、src、vspace与width。该对象还支持一个complete属性，该属性的值是一个逻辑值，表示该图像是否已被完全载入。代码16.13是一个对图像属性进行访问的例子。代码16.13 images：16.13.htm 访问图像属性 访问图像属性 !-定义一个，并设置其相关属性- 上面的代码运行后，显示一幅图像。如图16.21所示。单击页面上的“显示属性”按钮，会弹出一个对话框，显示该图像的相关属性信息。如图16.22所示。 图16.21 显示一幅图像 图16.22 弹出的对话框关闭该对话框，然后单击页面上的“替换图像”按钮，会用新的图像替换页面中原有的图像。如图16.23所示。16.4 DOM中的相关内容 / 2006-12-25 17:30:00 图书导读 16.4 DOM中的相关内容16.1 早期文档处理16.2 基本Document方法16.3 使用Document访问传统HTML元素16.5 用DOM处理表格16.6 DOM应用用Eclipse Forms让应用重生！改进Eclipse应用程序用户体验 为应用提供了一种 “Web 风格” 的外观 DB2及下一代商业数据库DB2 9 数据库开发与管理 IBM DB2技术经理为您讲解 3G到来影响手机革命WAP搜索新机遇 驿动网 16.4 DOM中的相关内容DOM 1试图对JavaScript的Document对象进行标准化，以支持对任意HTML元素的操作。这种技术上的倒退常被称为DOM 0（DOM第0层）。本节介绍DOM中与HTML元素相关的内容。16.4.1 DOM 1中的文档属性与聚集表16-3列出了DOM 1支持的Document属性，并加以简单说明。表16-3 DOM 1中的Document属性与聚集属性或聚集描 述anchors由定义的锚的聚集applets文档中由标签定义的Java applets聚集body表示文档可见部分（.）的对象的索引forms文档中的标签cookie存储文档Cookie值的字符串（如果有多个）doctype文档DTD的索引documentElement文档根元素的索引。在HTML中是标签domain文档的安全域images定义的图像的聚集implementation一个可确定标记语言特征的对象的索引links页面中由或定义的链接的聚集referrer存储引用的URL（如果有多个）Title文档标题URL存储文档URL的字符串从表中可以看出，除前面已经介绍的聚集以外，这里只增加了body、docType以及documentElement几个属性。惟一遗漏的是lastModified，不过浏览器仍对其提供支持。在方法方面，传统的Document对象只支持open()、close()、clear()、write()与writeln()，DOM 1去掉了close()方法（其用途极小），并且除了write()以外，DOM提供了更灵活的创建对象的方法。例如： 使用createComment(data)可以创建XHTML注释； 使用createElement(tagName)可以创建一个名为tagName的标签； 使用createTextNode(data)可以创建一个以data为内容的文本结点。DOM中还有其他一些以creat为前缀的方法，但通常都与HTML文档关系不大，这里不再介绍。在本书第12章中已经有所介绍，DOM增加了3个方法，也可以检索文档中的特定区域。 document.getElementById(elementId) ：返回id=elementId的对象的一个索引。 document.getElementsByName(elementName)：返回name=elementName的所有XHTML元素对象的列表。 document.getElementsByTagName(tagname)：返回所有别名为tagname 的所有XHTML元素的列表。16.4.2 HTMLElement 的公用属性与方法除DOM定义的属性之外，在HTML4和XHTML中，所有的元素还具有一个公用属性核心集（id、style、class与title）。所有这些加在一起，就构成了JavaScript中可表示任意元素的公用属性与方法集。在DOM中，该对象称为HTMLElement，其属性见表16-4。表16-4 HTMLElement 的公用属性公用属性与聚集描 述attributes元素属性的聚集（如果有多个）childNodes当前元素中附加结点的聚集classNameclass属性的值Dir一个文本，指向由dir属性设定的左右或右左顺序的文本firstChild当前HTML元素中附加的第一个结点的索引Id由id属性为元素设定的文本字符串lang由lang设定的元素语言代码lastChild当前HTML元素包含的子结点列表中的最后一个孩子的索引nodeNameHTML元素的名称，例如P。与tagName相同nodeValue结点的值。在HTML元素环境中，总是取空值nodeType结点类型的数字代码。在HTML元素环境中，总是为1nextSibling当前元素的下一DOM兄弟结点的索引ownerDocument包含当前元素的Document对象的索引parentNode包含HTML元素的上级元素的索引previousSibling当前元素的前一DOM兄弟结点的索引style访问当前元素的内联样式规则。这是一个DOM 2属性tagNameHTML元素名称的索引。在HTML元素结点环境中，与nodeName相同Title一个字符串，包含了由title属性为元素设定的文本表16-5列出了HTMLElement的公用方法。表16-5 HTMLElement的公用方法方 法 名 称说 明appendChild(newChild)将newChild作为最后一个子结点插入当前元素中cloneNode(deep)创建当前元素的一个副本。如果参数deep为True，会同时复制当前结点包含的所有内部结点getAttribute(name)返回属性值getElementsByTagName(tagName)包含当前元素中由tagName引用的元素列表hasChildNodes()返回一个逻辑值，指出当前结点是否含有子结点insertBefore(newChild, refChild)向元素结点列表插入一个newChild结点，位置在refChild结点之前removeAttribute(name)移除名称为name的属性removeChild(oldChild)移除由oldChild指定的结点replaceChild(newChild, oldChild)使用newChild替换oldChild结点setAttribute(name, value)返回属性的name16.4.3 访问具体HTML元素属性XHTML属性名与DOM属性名之间几乎存在一对一的关系，HTML的标签也可以在DOM中找到与其对应的对象。如果可以使用类似document.getElementById()的方法访问一个元素，则可以直接操作该元素及其关联属性。代码16.14是这样的一个例子。代码16.14 document.getElementById()：16.14.htmdocument.getElement