Working with XML and JavaScript Page 2

XML is a markup language that uses tags, like HTML, but you will find many differences as well. The following list shows what you must be aware of in creating XML files:

• The user defines the element names. (An opening and closing tag constitute an element: <pen>...</pen>.) XML has no formatting tags of its own.

• Internet Explorer 5+ and Netscape Navigator 6+ are required for displaying XML in a browser. Older browsers cannot display XML.

• Like JavaScript, XML is case- sensitive. The tag <Pen> is not the same as <pen>.

• All XML elements are containers and must have closing tags (for example, <pen> and </pen>). You could not have <p> without </p>, as with HTML.

• Each XML element requires a document type definition (DTD) or schema to be well formed.

• An element in XML is a self-contained mini-XML document.

Declaring an XML Document

To create an XML document, you need to first declare the document as an XML document. You do so with the following line:

<?xml version="1.0" ?>

You can add more information for different languages, but for the purposes at hand, just start off your XML scripts with this single line.

The Root Element

Following the XML document declaration, you need a root declaration. The root element encompasses everything that you put into the XML document. The other elements must be between the tags identifying the beginning and end of your root element. In the XML example that we've been using, the root element is <writers>. (Note that the comment tags are the same as those used in HTML.)

<?xml version="1.0" ?>
<!--First the root element -->
<writers>
<!--Rest of the tags between the opening and closing root tags
-->
</writers>

The root element is important because it is a reference point used by JavaScript to identify the hierarchy that leads to different child elements.

Filling in the Root

The parent-child relationship in XML is one of containers. The root element contains child elements. If one of the root's child elements contains a container, it is the parent of the contained tags yet still the child of the root element.

<root>   Parent to all elements
   <child>   Child of <root> Parent of <grandchild>
elements
      <grandchild>Dashiell Hammett</grandchild> Child of
<child>
      <grandchild>Toni Morrison</grandchild> Child of
<child>
   </child>
</root>

The <root> element is the parent of all, and the <child> element is the child of the root element and parent of both of the <grandchild> elements. The two <grandchild> elements are siblings. In the JavaScript DOM objects, you will see methods referring to child, parent, and sibling; these methods address the set of parent and child elements references.

Reading and Showing XML Data with JavaScript

As noted previously, Version 6 JavaScript browsers seem to be coming together over the W3C DOM. Several key methods and properties in JavaScript can help in getting information from an XML file. In the section, a very simple XML file is used to demonstrate pulling data from XML into an HTML page using JavaScript to parse (interpret) the XML file. Unfortunately, the examples are limited to using IE5+ on Windows. (The same programs that worked fine using IE5+ on Windows bombed using IE5+ on the Mac using either OS 9+ or OS X.)

JavaScript Design
Working with XML and JavaScript Page 3