Capt. Horatio T.P. Webb
 Displaying XML (and a short introduction to XSL)
Parks -- FALL 2000
Last Updated 12PM 3/22/2020

There are several ways to display XML data in the browser:

  1. Load the XML file into IE or higher

    IE will parse and display an XML file just by loading it into the browser.

    Just click http://www.bauer.uh.edu/parks/jv.xml to see the XML.

  2. Using the DOM (the XML data island) Rolling the XML into a container

    We can use the facility of the Document Object Model (DOM) to access the contents of an XML document embedded inside HTML. This requires three steps:

    1. an XML element with an ID (the XML data island)

      First you surround the XML data with <XML> and </XML> tags. We can take an XML document like:

       
      <?xml version="1.0"?>
      <family>
      <dad>Fred</dad>
      <mom>Alice</mom>
      <son>John</son>
      </family>

       

      To make the data island we surround the XML with IE5's <XML> tags with an id. Like:

       
      <XML id="data_island">
      <?xml version="1.0"?>
      <family>
      <dad>Fred</dad>
      <mom>Alice</mom>
      <son>John</son>
      </family>
      </XML>
       

      Note that the <XML> tags are IE5 specific -- not part of XML proper.

    2. the HTML and javascript, is: 

      <HTML>
<HEAD>
<STYLE type="text/css">
td {background-color:lightGreen;text-align:center;}
</STYLE >
<script language="javascript">
function ol()
{
var poSource = document.getElementById("data_island").textContent;
var parser = new DOMParser();
var doc = parser.parseFromString(poSource, "application/xml"); 
var root=doc.documentElement;

xml_string="<table border='1' cellspacing='1'>";
xml_string=xml_string+"<tr><td><b> NodeNumber </td><td><b> nodeName </td>";
xml_string=xml_string+"<td><b> nodeType </td><td><b> textContent </td></tr>";

for (i=0;i<root.childNodes.length;i++)
    {
	if (root.childNodes.item(i).nodeType==1)
	  {
        xml_string=xml_string+"<tr><td>"+i.toString()+"</td>";
        xml_string=xml_string+"<td>"+root.childNodes.item(i).nodeName+"</td>";
        xml_string=xml_string+"<td>"+root.childNodes.item(i).nodeType.toString()+"</td>";	 
        xml_string=xml_string+"<td>"+root.childNodes.item(i).textContent+"</td></tr>";
       }
	 if (i==0)  // *** root is different
       {
        xml_string=xml_string+"<tr><td>"+i.toString()+"</td>";
        xml_string=xml_string+"<td>"+root.nodeName+"</td>";
        xml_string=xml_string+"<td>"+root.nodeType.toString()+"</td>";	 
        xml_string=xml_string+"<td> has children</td></tr>";
        }	
	 }
xml_string=xml_string+"</table>";
data_island_destination.innerHTML = xml_string;
}
</SCRIPT>
</HEAD>
<BODY onLoad="ol()">
<table border="1"><tr><td><span id="data_island_destination">old
</span></td></tr></table>

<script id="data_island" type="application/xml">
<family>
<dad>Fred</dad>
<mom>Alice</mom>
<son>John</son>
<son>Alfred</son>
<daughter>Mary</daughter>
</family>
</script>

</body>
</html>

      Try this by clicking here

      We have used the DOM to get a handle for the XML (data_island), then roll through the XML with a loop. First we get the root name:

      root.nodeName;

      Now loop thru its children (if a node is nodeType=1)

      for (i=0;i<root.childNodes.length;i++)

      adding the node number, nodeName and data to a string (xml_string) as we walk the tree.

      Not pretty, but gets the job done (i.e., rolls the data out to HTML from the XML data island). Note the key here is the use of the nodelist components:

      • root.childNodes.item(i).nodeName (the node name)
      • root.childNodes.item(i).textContext (i.e., the content of the node)
      • and root.childNodes.length (how many children in the list -- our loop limit)

  3. Using CSS to format XML

    The basic idea is to use a style sheet specification in the xml file. This involves adding a single line to the xml file. This line contains a link to the style sheet where the CSS is defined for the elements of the XML file. Generally this looks like:

    <?xml-stylesheet type="text/css" href="URL_of_the_stylesheet"?>

    We can make a style sheet that specifies for each ELEMENT type some style options. For our <family> xml file we could say:

    family {display:block}
    dad {display:inline ; color: red}
    mom {display:inline ; color: blue}
    son {display:inline ; color: brown}
    daughter {display:inline ; color: green}

    This style sheet file is saved as: xmltest.css

    Now we just insert this style sheet reference into the original XML file and we get:

    <?xml version="1.0"?>
    <?xml-stylesheet type="text/css" href="xmltest.css"?>
    <family>
    <dad>Fred</dad>
    <mom>Alice</mom>
    <son>John</son>
    <son>Alfred</son>
    <daughter>Mary</daughter>
    </family>

    Click here to see the results. Simple.