Once the XML data is loaded into an XML DOM object or an XML DSO, the objects can be used to traverse through the data in the data nodes of the XML document. The data nodes need to be traversed before it can be prepped for presentation.  Then the data can be placed into HTML.

XML DOM Object

Each XML document and each XML DOM Document object consists of a single root element and its descendants (other elements). If it is an XHTML document, then the root element must be <html>. An XML DOM object is traversed primarily by accessing its root element.

XMLDOMObject.documentElement
'The root element or node.

The childNodes collection of the root element has all the usual characteristics of 0-based collections. EGs:

XMLDOMObject.documentElement.childNodes.item(n)
'The child node.
XMLDOMObject.documentElement.childNodes.item(n).text
'The value in the child node.
XMLDOMObject.documentElement.childNodes.length
'The number of child nodes.
XMLDOMObject.documentElement.childNodes.item(n).childNodes.item(n)
'The grandchild node.

Note that an object variable can be set to any node. EGs:

nodeRoot = XMLDOMObject.documentElement
nodeChild = NodeRootchildNodes.item(n)
nodeGrandChild = NodeChild.childNodes.item(n)

You can navigate to any mode in this fashion. A child node of a node can also be accessed by its tag name. This gets the value of the first node with that tag name if it exists, but note that there may be multiple child nodes with that tag name.

ValueOfChildOfAnyNode = nodeAny.getElementsByTagName('tagName').item(n).text

Once the value of a particular is node is captured and set to some variable, it can be placed into HTML or used in additional scripting.

Prep for HTML

Assume that we've captured a value:

<head>
...
<script ....>
...
strValue = XMLDOMObject.documentElement.childNodes.item(n).text
</script>
...

That value may be placed anywhere in the HTML body with this bit of script:

<script>document.write(strValue)</script>

Here are bits of script that cycles through an XML DOM object that is structured like a typical table (see XDM DSO below).

This one basically goes through the items by their indexes and then looks for field/data node names.

rstNodeRoot = XMLDOMObject.documentElement;
for (rstCount = 0; rstCount < rstNodeRoot.length; rstCount++){
  recNodeChild = rstNodeRoot.item(rstCount).childNodes;
  for (fldCount = 0; fldCount < recNodeChild.length; fldCount++){
    switch (recNodeChild.item(fldCount).tagName){
      case "FieldName1";
        strFieldValue1 = recNodeChild.item(fldCount).text;
        break;
      case "FieldValue2";
        strField2 = recNodeChild.item(fldCount).text;
        break;
      ...
      case "FieldValueN";
        strFieldN = recNodeChild.item(fldCount).text;
        break;
    }
  }
  document.writeln("<ul>");
  document.writeln("<li>" + strFieldValue1 + "</li>");
  document.writeln("<li>" + strFieldValue2 + "</li>");
  ...
  document.writeln("<li>" + strFieldValueN + "</li>");
  document.writeln("</ul><br>");
}

Prep for DHTML

Some event can call this function:

<script ...>
function CallMe(){
  span1.innerText = XMLDOMObject.documentElement.childNodes.item(n).text
}
</script>

That function will place the value into this span which could be anywhere in the body:

<span id="span1"></span>

XML DSO

XML DSO can be navigated like an XML DOM object but then why bother to make an XML DSO?

XML DSOs (Data Source Objects) can be used like an XML DOM object but it also has two major advantages:

However, the XML DSO also has two major drawbacks:

Here is an example of XML data structured like a typical table/recordset that has 2 records/rows and 3 fields/columns:

<rstNodeRoot>
  <recNodeChild>
    <fldNodeGrandChild1>fldValue1InRec1<fldNodeGrandChild1>
    <fldNodeGrandChild2>fldValue2InRec1<fldNodeGrandChild2>
    <fldNodeGrandChild3>fldValue3InRec1<fldNodeGrandChild3>
  </recNodeChild>
  <recNodeChild>
    <fldNodeGrandChild1>fldValue1InRec2<fldNodeGrandChild1>
    <fldNodeGrandChild2>fldValue2InRec2<fldNodeGrandChild2>
    <fldNodeGrandChild3>fldValue3InRec2<fldNodeGrandChild3>
  </recNodeChild>
</rstNodeRoot>

A node, i.e. a row can be made the current code with script similar to either of the following:

recCurrent = XMLDSO.XMLDocument.documentElement.childNodes.item(n)
recCurrent = XMLDSO.documentElement.childNodes.item(n)

Script can get the grandchild node value, i.e. the value of a field in the current row with this syntax:

fldValue = recCurrent.childNodes.item(n).text
fldValue = XMLDSO.recordset("FieldName")

The rows can be navigated by calling upon script similar to the following:

function FMovePrevious(){
  if (XMLDSO.recordset.bof){
    alert("Already at BOF");
  }else{
    XMLDSO.recordset.movePrevious()
    if (XMLDSO.recordset.bof){
      XMLDSO.recordset.moveFirst();
      alert("This is the first row");
    }
  }
}

Binding HTML to the XML DSO

HTML elements to be bound to the XML DSO.

This example shows the value of the specified field for the current row.

<span datasrc="#XMLDSO" datafld="FieldName"></span>

This example will show an image if the value of the specified field contains the path and file name of an image.

<src  datasrc="#XMLDSO" datafld="FieldName">

An HTML table can be bound to the XML DSO and display all of its data. All rows that are not part of a <thead> or <tfoot> row group are repeated once for each field/child node.

<table datasrc="#XMLDSO">
  <thead>
    <tr>
      <th>FieldNameTitle1</th>
      <th>FieldNameTitle1</th>
      ...
      <th>FieldNameTitleN</th>
  </thead>
  <tr>
    <td><span datafld="FieldName1"></span></td>
    <td><span datafld="FieldName2"></span></td>
    ...
    <td><span datafld="FieldNameN"></span></td>
  </tr>
  <tr>
    <td colspan="n"><hr/></td>
  <tr>
</table>

Page Modified: (Hand noted: ) (Auto noted: )