/lenasys/trunk

<span class="description">

<br>

<div class="descriptionheading">Overview</div>

This example shows how to navigate a DOM document.

<br><br>

<div class="descriptionheading">Initiation</div>

The first part of the code (rows 8-10) creates the DOM document object. The DOM object has all the functionality needed to 

load and parse a document. We use the load function (row 10) to load the data into memory. When this is done, the DOM object contains

a reference to the data that has been loaded into memory. <a href="#" onclick="highlight(['ace_showcodephp'],'str_replace')">str_replace</a>

<br><br>

<div class="descriptionheading">Element Navigation</div>

The <span class="interestingdescription">documentElement</span> (row 12) attribute of the DOMDocument object contains a reference

to the root node of the dom document. In this case it is a person element. <a href="#" onclick="highlight(['ace_showcodephp'],'buffer')">buffer</a>

<br><br>

In the following row (row 12) we print the name of the element using the <span class="interestingdescription">tagName</span> attribute (for this file <a href='../XMLData/example1.xml'>example1.xml</a> the root element is a person element)  <a href="#" onclick="highlight(['ace_showcodephp','ace_indexphp'],'script');">script</a>

<br><br>

The foreach statement on row (13-17) iterates over the <span class="interestingdescription">childNodes</span> of the root node that was retrieved on row 12.

The childNodes attribute returns an array of the child nodes of the node. If there are no child nodes, an empty array is returned.

<br><br>

The <span class="interestingdescription">nodeValue</span> attribute (row 16) of a document element gives us the text content of any elements

below the referenced element. In this case the nodeValue for the "car" element returns  the value "Red!!" even though the contents inside the car element 

is a color element which contains the text "Red!!".

<br><br>

<div class='exampleheading'>Web Page Output:<br><br>

<img src='DomExample1.png'>

</div>

                                                                                                                                        

</span>