| 在本节中,你将会学习使用HTNL 网页与DOM 来显示XML 文件元素的内容的基本技巧。列表9-2 和9-3 显示了这些技巧。(你可从随书光盘的 Book.xml 与 DomDemo Fixed.htm 档案中找到列表9-2 和9-3。) Book.xml <?xml version="1.0"?> <!--File Name:Book.xml --> <BOOK> <TITLE>The Adventures of Huckleberry Finn</TITLE> <AUTHOR>Mark Twain</AUTHOR> <BINDING>mass market paperback</BINDING> <PAGES>298</PAGES> <PRICE>$5.49</PRICE> </BOOK> DomDemo Fixed.htm <!--File Name:DomDemo Fixed.htm --> <HTML> <HEAD> <TITLE>Book Description</TITLE> <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD"> Document =dsoBook.XMLDocument; title.innerText= Document.documentElement.childNodes(0).text; author.innerText=Document.documentElement.childNodes(1).text; binding.innerText= Document.documentElement.childNodes(2).text; pages.innerText= Document.documentElement.childNodes(3).text; price.innerText= Document.documentElement.childNodes(4).text; </SCRIPT> </HEAD> <BODY> <XML ID="dsoBook" SRC="Book.xml"></XML> <H2>Book Description</H2> <SPAN STYLE="font-style:italic">Title:</SPAN> <SPAN ID="title" STYLE="font-weight:bold"></SPAN> <BR> <SPAN STYLE="font-style:italic">Author:</SPAN> <SPAN ID="author"></SPAN> <BR> <SPAN STYLE="font-style:italic">Binding:</SPAN> <SPAN ID="binding"></SPAN> <BR> <SPAN STYLE="font-style:italic">Number of pages:</SPAN> <SPAN ID="pages"></SPAN> <BR> <SPAN STYLE="font-style:italic">Price:</SPAN> <SPAN ID="price"></SPAN> </BODY> </HTML> 列表9-2 包含了一份描述个别书籍的简单XML 文件。其根元素-BOOK,包含五个子元素(TITLE、AUTHOR、BINDING、PAGES 与PRICE),每个元素包含了描述书籍某项特征的文字数据。 列表9-3 包含了一份显示XML 文件中每个子元素内容的HTML 网页。此网页在Internet Explorer 5 中的显示如下: 此XML 文件透过下列的data island 被联结至该HTML 网页: <XML ID="dsoBook" SRC="Book.xml"></XML> 该HTML网页借着下列的script 程序代码来显示XML 文件,而程序代码则是包含在网页的HEAD 元素中。 <SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD"> Document =dsoBook.XMLDocument; title.innerText= Document.documentElement.childNodes(0).text; author.innerText= Document.documentElement.childNodes(1).text; binding.innerText= Document.documentElement.childNodes(2).text; pages.innerText= Document.documentElement.childNodes(3).text; price.innerText= Document.documentElement.childNodes(4).text; </SCRIPT> FOR "window"和EVENT= "ONLOAD"两项属性设定,会导致浏览器在第一次为网页开启窗口显示网页的内容之前,先执行SCRIPT 元素中的程序代码。= 提示 本章中的script 范例,是以微软的Jscript 所撰写的。你可以从下列网站,(都是由微软的MSDN提供) http://msdn.microsoft.com/workshop/c-frame.htm#/workshop/languages/jscript/handling.asp 和 http://msdn.microsoft.com/scripting/default.htm?/scripting/jscript/default.htm .中,取得有关JScript 的完整信息,包括专为初学者设计的导览。 该script 首先会取得代表整份文件的Document 节点,并建立DOM 节点阶层结构的根节点。这将借着使用本章之前介绍的DSO 成员对象XMLDocument 来达成。 Document =dsoBook.XMLDocument; 接着script 会存取并显示包含在根元素的每一个子元素(如,TITLE、AUTHOR、BINDING、PAGES 和PRICE 等)中的字符数据。例如,程序会将第一个子元素(TITLE)的内容显示如下: title.innerText=Document.documentElement.childNodes(0).text; 下面是等号右边表达式的详细解释: Documentru 包含了位于DOM 节点阶层结构中根节点的Document 节点。 documentElement 是Document 节点的一个属性。它包含了代表XML 文件根元素的Element 节点-在此例中为BOOK。 注意 documentElement 属性是一个Document 类型节点所提供的特殊属性。表格9-3列出了由Document 节点特别提供的其它有用的属性和方法。记住,利用Document 节点你也可以使用列表9-2 所列的任何共同节点属性。 childNodes 为代表根元素Element 节点的一个属性。它包含了根元素Element节点中所有非属性子节点的集合。在此例中, childNodes 包含了Element 节点的5 个子XML 元素:TITLE、AUTHOR、BINDING、PAGES 与PRICE。表示式childNodes(0) 会参考这些子节点的第一个子节点(即TITLE 元素)。 注意 在范例网页中(列表9-3),你可以使用表示式Document.childNodes(2)来取得根元素的节点。(Document.childNodes(0) 是代表XML 宣告的节点,而Document.childNodes(1)则是表示批注的节点。)然而,使用Document 节点的documentElement 属性的好处是,其属性值并不依靠XML 文件中根元素的位置。例如,如果你将文件起始部分的批注移除,或是增加了文件形态宣告,则 Document.childNodes(2) 将不再代表根元素。 text 是一个由childNodes(0)所传回节点的属性。它提供了该节点的完整文字内容,以及任何属于该节点所拥有的后继Element 节点的文字内容。在这个范例中,TITLE 并没有任何的后继元素,所以text 只包含TITLE 本身的文字-「The Adventures of Huckleberry Finn」。 注意 childNodes 与text 属性都是表格9-2 中所列的共同节点属性。
下列程序代码中,元素TITLE 的字符数据(「The Adventures of Huckleberry Finn」)是由等号右侧得来,并指定到拥有识别代号title 的HTML 之SPAN 元素的innerText 属性中。 title.innerText=Document.documentElement.childNodes(0).text; SPAN 元素被定义在HTML 网页的BODY 标签里,如下所示: <SPAN ID="title" STYLE="font-weight:bold"></SPAN> 将字符数据设定到SPAN 元素的innerText 属性,将会导致SPAN 元素利用定义在其起始标签中的格式(font-weight:bold)来显示其字符数据。 提示 在Internet Explorer 5 所支授的动态HTML(DHTML)中,每个HTML 元素都拥有一群属性,让你可以透过script 程序代码来设定或查询元素的不同特征。innerText 属性负责设定或查询元素的文字内容。从微软MSDN 所提供的网站,网页 http://msdn.microsoft.com/workshop/author/default.asp 中,可以取得在Internet Explorer 5 中,运用HTML 和DHTML 的相关知识。 |








