xml| variable | So far, you've learned how to display an XML file with a known number of elements. If the number of elements in an XML file is unknown, using the DOM to display the XML file becomes a bit more complicated.
For example, two XML files, such as Inventory.xml (available in listing 8-1 and with a book CD) or Inventory Big.xml (available in listing 8-3 and the accompanying CD-ROM), usually do not know how many book elements are in this file. And if the number of book elements changes, of course you want your script to still work.
Listing 9-4 presents a way to use the DOM to display Inventory.xml Web pages using a method that is independent of the number of book elements contained in the file. (You can find listing 9-4 from the Domdemo variable.htm file in the accompanying book CD.) The following figure shows the scenario for this page in Internet Explorer 5:
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>
<div id= "Displaydiv" ></DIV>
</BODY>
</HTML>
The script of the example Web uses the Length property to determine the number of book elements that are contained within the root element. (The Length property is one of the members of the NodeList collection object provided by the ChildNodes property of the root element node.) Please refer to table 9-4. This script contains a for loop, which, for every execution, handles a book element, and the script also contains the program code that displays the elements.
for (I=0;i <document.documentelement.childnodes.length;i++)
{
/*code to display a book element...*/
}
Because the number of book elements is unknown, the Web page cannot use a fixed set of span elements in the body tag to display the data (as is the case with the previous example page in Listing 9-3). More precisely, for each book element, the script dynamically produces the entire HTML tag block needed to display the element:
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>";
}
The Script stores all of the HTML's volume-label chunks in the variable htmlcode. After the For loop, when all chunks have been generated and stored in Htmlcode, script assigns the HTML volume label to the attribute innerHTML of the div element in the body volume label of the page (the element's ID is Displaydiv):
Displaydiv.innerhtml=htmlcode;
The DIV element then immediately generates an HTML program and displays its result, which is the picture previously seen.
To make sure that the Web page works correctly regardless of the number of book elements contained in the XML file, you can edit the data island in the Web page to display the inventory big.xml. The number of book elements in inventory big.xml is twice times the number of elements contained in Inventory.xml:
<xml id= "Dsoinventory" src= "Inventory big.xml" ></XML>
