顯示可變量目的XML元素

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

<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 +=
"Title:"
+Document.documentElement.childNodes(i).childNodes(0).text
+" "
+"Author:"
+Document.documentElement.childNodes(i).childNodes(1).text
+" "
+"Binding:"
+Document.documentElement.childNodes(i).childNodes(2).text
+" "
+"Number of pages:"
+""
+Document.documentElement.childNodes(i).childNodes(3).text
+" "
+"Price:"
+Document.documentElement.childNodes(i).childNodes(4).text
+"";
}
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 +=
"Title:"
+Document.documentElement.childNodes(i).childNodes(0).text
+" "

+"Author:"
+Document.documentElement.childNodes(i).childNodes(1).text
+" "
+"Binding:"
+Document.documentElement.childNodes(i).childNodes(2).text
+" "
+"Number of pages: "
+""
+Document.documentElement.childNodes(i).childNodes(3).text
+" "
+"Price:"
+Document.documentElement.childNodes(i).childNodes(4).text
+"";
}
 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詳解

XML簡明教程第6課: 作者：佚名文章來源：不詳 &
如何建立一個 XML 的開發元: 學習 XML 的最佳途經是從簡單的開發入手，大膽實踐，循序漸進。XML 的妙處只有在開發過程中才能
一個簡單的基於XML的模塊集成框架 (1): 1. 准備一個XML文件　　XMLmenu　　1<Menu>　　2　　<Menu

XML基礎 XML與XSLT XML詳解

DIV CSS 佈局教程網

相關文章