DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> 顯示可變量目的XML元素
顯示可變量目的XML元素
編輯:XML詳解     
至目前為止,你已經學得如何顯示擁有已知個數元素的XML 文件。如果XML 文件的元素個數是未知數時,使用DOM 來顯示該XML 文件將會變得有點復雜。
    例如,像 Inventory.xml (列表8-1 與隨書光盤中都有提供)或 Inventory Big.xml (列表8-3與隨書光盤中都有提供)等兩個XML 文件,通常你並不知道在此文件中有多少個BOOK 元素。而且若BOOK 元素的數量改變,你當然也希望你的script 仍可正常地運作。
    列表9-4 提出了一份利用一種與文件中包含的BOOK 元素數量無關的方法,來使用DOM 顯示 Inventory.XML 的網頁。(你可從隨書光盤中的 DomDemo Variable.htm 檔案中找到列表9-4。)下圖是這份網頁顯示於Internet EXPlorer 5 中的情形:

顯示可變量目的XML元素圖片1


DomDemo Variable.htm
<!--File Name:DomDemo Variable.htm -->
<Html>
<HEAD>
<TITLE>Book Inventory</TITLE>
<SCRIPT LANGUAGE="Javascript" FOR="window" EVENT="ONLOAD">
HtmlCode ="";
Document =dsoInventory.XMLDocument;
for (i=0;
i <Document.documentElement.childNodes.length;
i++)
{
HtmlCode +=
"<SPAN STYLE='font-style:italic'>Title:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(0).text
+"<BR>"
+"<SPAN STYLE='font-style:italic'>Author:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(1).text
+"<BR>"
+"<SPAN STYLE='font-style:italic'>Binding:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(2).text
+"<BR>"
+"<SPAN STYLE='font-style:italic'>Number of pages:"
+"</SPAN>"
+Document.documentElement.childNodes(i).childNodes(3).text
+"<BR>"
+"<SPAN STYLE='font-style:italic >Price:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(4).text
+"<P>";
}
DisplayDIV.innerHTML=HtmlCode;
</SCRIPT>
</HEAD>
<BODY>
<XML ID="dsoInventory" SRC="Inventory.xml"></XML>
<H2>Book Inventory</H2>
<DIV ID="DisplayDIV"></DIV>
</BODY>
</Html>
    范例網頁的script 利用length 屬性來決定包含在根元素之內的BOOK 元素的數量。(length 屬性是根元素節點的childNodes 屬性所提供NodeList 集合對象的成員之一。請參考 表格9-4 。)這份script 中包含了一個for 循環,循環每執行一次,就是處理一個BOOK 元素,另外script中也包含了顯示這些元素的程序代碼。
for (i=0;i <Document.documentElement.childNodes.length;i++)
{
/*code to display a BOOK element...*/
}
    因為BOOK 元素的個數是未知的,所以網頁不能在BODY 標簽中使用一組固定的SPAN 元素來顯示數據(列表9-3 中的先前的范例網頁就是這樣)。更確切的說,對於每個BOOK 元素,script程序會動態地產生顯示元素所需的整個Html 標簽區塊:

for (i=0;i <Document.documentElement.childNodes.length;i++)
{
HtmlCode +=
"<SPAN STYLE='font-style:italic'>Title:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(0).text
+"<BR>"

+"<SPAN STYLE='font-style:italic'>Author:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(1).text
+"<BR>"
+"<SPAN STYLE='font-style:italic'>Binding:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(2).text
+"<BR>"
+"<SPAN STYLE='font-style:italic'>Number of pages: "
+"</SPAN>"
+Document.documentElement.childNodes(i).childNodes(3).text
+"<BR>"
+"<SPAN STYLE='font-style:italic'>Price:</SPAN>"
+Document.documentElement.childNodes(i).childNodes(4).text
+"<P>";
}
    Script 程序將所有HTML 的卷標區塊儲存於變量HTMLCode 中。在for 循環之後,當所有區塊已經產生且儲存於HTMLCode 中時,script 會將HTML 卷標指定到網頁BODY 卷標中DIV 元素的屬性innerHtml(此元素的ID 為DisplayDIV)中:
DisplayDIV.innerHTML=HtmlCode;
    然後DIV 元素會立即產生Html 程序並顯示其結果,即先前所見的圖片。
    為了讓自己確信,無論XML 文件中包含的BOOK 元素數量是多少,網頁都能正常運作,你可以編輯網頁中的data island,來顯示Inventory Big.xml。其中Inventory Big.xml 中BOOK 元素的數量是Inventory.XML 所含元素數量的兩倍:
<XML ID="dsoInventory" SRC="Inventory Big.xml"></XML>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved