The HTML standard is maintained by W3C. This standard might seem fairly straightforward, given that each version should have introduced just a few new elements, but in reality the life of the standards body was vastly complicated by the browser wars. The versions 1.0 and 2.0 of HTML were simple, small documents, but when W3C came to debate HTML version 3.0, they found that much of the new functionality it was discussing had already been superseded by new additions, such as the <applet /> and <style /> elements, to the version 3.0 browser's appletstyle. Version 3.0 was discarded, and a new version, 3.2, became the standard.

However, a lot of the features that went into HTML 3.2 had been introduced at the behest of the browser manufacturers and ran contrary to the spirit of HTML, which was intended solely to define structure. The new features, stemming from the <font /> element, just confused the issue and added unnecessary presentational features to HTML. These features really became redundant with the introduction of style sheets. So suddenly, in the version 3 browsers, there were three distinct ways to define the style of an item of text. Which was the correct way? And if all three ways were used, which style did the text ultimately assume? Version 4.0 of the HTML standard was left with the job of unmuddling this chaotic mess and designated a lot of elements for deprecation (removal) in the next version of the standards. It was the largest version of the standard so far and included features that linked it to style sheets and the Document Object Model, and also added facilities for the visually impaired and other unfairly neglected minority interest areas. The current version of the HTML standard is 4.01.

Extensible Markup Language, or XML, is a standard for creating markup languages (such as HTML). XML itself has been designed to look as much like HTML as possible, but that's where the similarities end.

HTML is actually an application of the meta-language SGML, which is also a standard for generating markup languages. SGML has been used to create many markup languages, but HTML is the only one that enjoys universal familiarity and popularity. XML, on the other hand, is a direct subset of SGML. SGML is generally considered to be too complex for people to be able to accurately represent it on a computer, so XML is a simplified subset of SGML. XML is also much easier to read than SGML.

XML's main use is for the creation of customized markup languages that are very similar in look and structure to HTML. One main use of XML is in the representation of data. Whereas a normal database can store information, databases don't allow individual stored items to contain information about their structure. XML can use the element structure of markup languages to represent any kind of data in which information contained in the structure might otherwise be lost, from mathematical and chemical notations to the entire works of Shakespeare. For instance, an XML document could be used to record that Mark Antony doesn't appear until Scene II Act I of Shakespeare's play Julius Caesar, whereas a relational database would struggle to do this without a lot of extra fields, as the following example shows:

<play>
    <act1>

<scene1>
           . . .
        </scene1>
        <scene2>
            <mark_anthony>
                Caesar, my lord?
            </mark_anthony>
        </scene2>
        <scene3>
           . . .
        </scene3>
    </act1>
    <act2>
        . . .
    </act2>
    <act3>
        . . .
    </act3>
    <act4>
        . . .
    </act4>
    <act5>
        . . .
    </act5>
</play>

XML is also completely cross-platform, because it contains just text. This means that an application on Windows can package up the data in this format, and a completely different application on Unix should be able to unravel and read that data.

XHTML 1.0 is where the XML and HTML standards meet. XHTML is just a respecification of the HTML 4.01 standard as an XML application. The advantages of this allow XHTML to get around some of the problems caused by a browser's particular interpretation of HTML, and more importantly to provide a specification that allows the Web to be used by clients other than browsers, such as those provided on handheld computers, mobile phones, or any software device that might be connected to the Internet (perhaps even your refrigerator!).

XHTML also offers a common method for specifying your own elements, instead of just adding them randomly. You can specify new elements via a common method using an XML Document Type Declaration and an XML name-space. (A namespace is a means of identifying one set of elements uniquely from any other set of elements.) This is particularly useful for the new markup languages, such as Wireless Markup Language (WML), which are geared toward mobile technology and require a different set of elements to be able to display on the reduced interfaces.

That said, anyone familiar with HTML should be able to look at an XHTML page and understand what's going on. There are differences, but not ones that add new elements or attributes.

The following is a list of the main differences between XHTML and HTML:

This set of rules makes it possible to keep a strict hierarchical structure to the elements, which in turn makes it possible for the Document Object Model to work correctly. This also makes it possible to standardize markup languages across all device types, so that the next version of WML (the markup language of mobile devices) will also be compliant with the XHTML standard. You should now be creating your HTML documents according to the previously specified rules. If you do so, you will find it much, much easier to write JavaScript that manipulates the page via the DOM and works in the way it was intended.

JavaScript itself followed a trajectory similar to that of HTML. It was first used in Netscape Navigator and then added to Internet Explorer. The Internet Explorer version of JavaScript was christened Jscript and wasn't far removed from the version of JavaScript found in Netscape Navigator. However, once again, there were differences between the two implementations and a lot of care had to be taken in writing script for both browsers.

Oddly enough, it was left to the European Computer Manufacturers Association (ECMA) to propose a standard specification for JavaScript. This didn't appear until a few versions of JavaScript had already been released. Unlike HTML, which had been developed from the start with the W3C consortium, JavaScript was a proprietary creation. This is the reason that it is governed by a different standards body. Microsoft and Netscape both agreed to use ECMA as the standards vehicle/debating forum, because of its reputation for fast-tracking standards and perhaps also because of its perceived neutrality. The name ECMAScript was chosen so as not to be biased toward either vendor's creation and also because the "Java" part of JavaScript was a trademark of Sun licensed to Netscape. The standard, named ECMA-262, laid down a specification that was roughly equivalent to the JavaScript 1.1 specification.

That said, the ECMAScript standard covers only core JavaScript features, such as the primitive data types of numbers, strings, and Booleans, native objects like the Date, Array, and Math objects, and the procedural statements like for and while loops, and if and else conditionals. It makes no reference to client-side objects or collections, such as window, document, forms, links, and images. So, although the standard helps to make core programming tasks compatible when both JavaScript and JScript comply with it, it is of no use in making the scripting of client-side objects compatible between the main browsers. Some incompatibilities remain.

All current implementations of JavaScript are expected to conform to the current ECMAScript standard, which is ECMAScript edition 3, published in December 1999. As of November 2006, ECMAScript edition 4 is under development.

Although there used to be quite a few irregularities between the Microsoft and Netscape dialects of JavaScript, they're now similar enough to be considered the same language. The Opera and Safari browsers also support and offer the same kind of support for the standard. This is a good example of how standards have provided a uniform language across browser implementations, although a feature was similar to the one that took place over HTML still rages to a lesser degree over JavaScript.

It's now time for you to consider the Document Object Model itself.

We haven't talked about the DOM standard so far, and for a particular reason: It's not the easiest standard to follow. Supporting a generic set of properties and methods has proved to be a very complex task, and the DOM standard has been broken down into separate levels and sections to deal with the different areas. The different levels of the standard are all at differing stages of completion.

document.forms[0].elements[1].value = "button1";

As mentioned earlier, there are two main differences between the Document Object Model and the Browser Object Model. However, complicating the issue is the fact that a BOM is sometimes referred to under the name DOM. Look out for this in any literature on the subject.

Because HTML is standardized so that web pages can contain only the standard features supported in the language, such as forms, tables, images, and the like, a common method of accessing these features is needed. This is where the DOM comes in. It provides a uniform representation of the HTML document, and it does this by representing the entire HTML document/web page as a tree structure.

In fact, it is possible to represent any HTML document (or any XML document for that matter) as a tree structure. The only precondition is that the HTML document should be well formed. Different browsers might be tolerant, to a greater or lesser extent, of quirks such as unclosed tags, or HTML form controls not being enclosed within a <form/> element; however, for the structure of the HTML document to be accurately depicted, you need to be able to always predict the structure of the document. Abuses of the structure, such as unclosed tags, stop you from depicting the structure as a true hierarchy, and therefore cannot be allowed. The ability to access elements via the DOM depends on the ability to represent the page as a hierarchy.

What Is a Tree Structure?

If you're not familiar with the concept of trees, don't worry. They're just a diagrammatic means of representing a hierarchical structure.

Let's consider the example of a book with several chapters. If instructed to, you could find the third line on page 543 after a little searching. If an updated edition of the book were printed with extra chapters, more likely than not you'd fail to find the same text if you followed those same instructions. However, if the instructions were changed to, say, "Find the chapter on still-life painting, the section on using watercolors, and the paragraph on positioning light sources," you'd be able to find that even in a reprinted edition with extra pages and chapters, albeit with perhaps a little more effort than the first request required.

Books aren't particularly dynamic examples, but given something like a web page, where the information could be changed daily, or even hourly, can you see why it would be of more use to give the second set of directions than the first? The same principle applies with the DOM. Navigating the DOM in a hierarchical fashion, rather than in a strictly linear way, makes much more sense. When you treat the DOM as a tree, it becomes easy to navigate the page in this fashion. Consider how you locate files on Windows using Windows Explorer, which creates a tree view of folders through which you can drill down. Instead of looking for a file alphabetically, you locate it by going into a particular folder.

The rules for creating trees are simple. You start at the top of the tree with the document and the element that contains all other elements in the page. The document is the root node. A node is just a point on the tree representing a particular element or attribute of an element, or even the text that an element contains. The root node contains all other nodes, such as the DTD declaration, the XML declaration if applicable, and the root element (the HTML or XML element that contains all other elements). The root element should always be the <html/> element in an HTML document. Underneath the root element are the HTML elements that the root element contains. Typically an HTML page will have <head/> and <body/> elements inside the <html/> element. These elements are represented as nodes underneath the root element's node, which itself is underneath the root node at the top of the tree (see Figure 12-1).

Figure 12.1. Figure 12-1

The two nodes representing the <head/> and <body/> elements are examples of child nodes, and the <html/> element's node above them is a parent node. Since the <head/> and <body/> elements are both child nodes of the <html/> element, they both go on the same level underneath the parent node <html/> element. The <head/> and <body/> elements in turn contain other child nodes/HTML elements, which will appear at a level underneath their nodes. So child nodes can also be parent nodes. Each time you encounter a set of HTML elements within another element, they each form a separate node at the same level on the tree. The easiest way of explaining this clearly is with an example.

An Example HTML Page

Let's consider a basic HTML page such as this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
    <h1>My Heading</h1>
    <p>This is some text in a paragraph.</p>
</body>
</html>

The <html/> element contains <head/> and <body/> elements. Only the <body/> element actually contains anything. It contains an <h1/> element and a <p/> element. The <h1/> element contains the text My Heading. When you reach an item, such as text, an image, or an element, that contains no others, the tree structure will terminate at that node. Such a node is termed a leaf node. You then continue to the <p/> node, which contains some text, which is also a node in the document. You can depict this with the tree structure shown in Figure 12-2.

Figure 12.2. Figure 12-2

Simple, eh? This example is almost too straightforward, so let's move on to a slightly more complex one that involves a table as well.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>This is a test page</title>
</head>
<body>
    <span>Below is a table. . .</span>
    <table border="1">
        <tr>
           <td>Row 1 Cell 1</td>
           <td>Row 1 Cell 2</td>
        </tr>
        <tr>
           <td>Row 2 Cell 1</td>
           <td>Row 2 Cell 2</td>
        </tr>
    </table>
</body>
</html>

There is nothing out of the ordinary here; the document contains a table with two rows with two cells in each row. You can once again represent the hierarchical structure of your page (for example, the fact that the <html/> element contains a <head/> and a <body/> element, and that the <head/> element contains a <title/> element, and so on) using your tree structure, as shown in Figure 12-3.

Figure 12.3. Figure 12-3

The top level of the tree is simple enough; the <html/> element contains <head/> and <body/> elements. The <head/> element in turn contains a <title/> element and the <title/> element contains some text. This text node is a child node that terminates the branch (a leaf node). You can then go back to the next node, the <body/> element node, and go down that branch. Here you have two elements contained within the <body/> element, the <span/> and <table/> elements. Although the <span/> element contains only text and terminates there, the <table/> element contains two rows (<tr/>), and the two <tr/> elements contain two table cell (<td/>) elements. Only then do you get to the bottom of the tree with the text contained in each table cell. Your tree is now a complete representation of your HTML code.

What you have seen so far has been highly theoretical, so let's get a little more practical now.

The DOM provides you with a concrete set of objects, properties, and methods that you can access through JavaScript to navigate the tree structure of the DOM. Let's start with the set of objects, within the DOM, that is used to represent the nodes (elements, attributes, or text) on your tree.

If you tried to look at the properties and methods of all the objects in the DOM, it would take up half the book. Instead you're going to actively consider only three of the objects, namely the Node object, the Element object, and the Document object. This is all you'll need to be able to create, amend, and navigate your tree structure. Also, you're not going to spend ages trawling through each of the properties and methods of these objects, but rather look only at some of the most useful properties and methods and use them to achieve specific ends.

The Document Object and its Methods

The Document reference type exposes various properties and methods that are very helpful to someone scripting the DOM. Its methods allow you to find individual or groups of elements and create new elements, attributes, and text nodes. Any DOM scripter should know these methods and properties, as they're used quite frequently.

The Document object's methods are probably the most important methods you'll learn. While many tools are at your disposal, the Document object's methods let you find, create, and delete elements in your page.

Finding Elements or an Element

Let's say you have an HTML web page — how do you go about getting back a particular element on the page in script? The Document reference type exposes the follow methods to perform this task:

Methods of the Document Object	Description
getElementById(idValue)	Returns a reference (a node) to an element, when supplied with the value of the id attribute of that element
getElementsByTagName(tagName)	Returns a reference (a node list) to a set of elements that have the same tag as the one supplied in the argument

The first of the two methods, getElementById(), requires you to ensure that every element you want to quickly access in the page uses an id attribute, otherwise a null value (a word indicating a missing or unknown value) will be returned by your method. Let's go back to the first example and add some id attributes to the elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>example</title>
</head>

<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</para>
</body>
</html>

Now you can use the getElementById() method to return a reference to any of the HTML elements with id attributes on your page. For example, if you add the following code in the shaded section, you can find and reference the <h1/> element:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <title>example</title>
</head>
<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</para>
    <script type="text/javascript">
        alert(document.getElementById("heading1"));
    </script>
</body>
</html>

Figure 12-4 shows the result of this code in Firefox.

Figure 12.4. Figure 12-4

HTMLHeadingElement is an object of the HTML DOM. All HTML elements have a corresponding reference type in the DOM. See Appendix C for more objects of the HTML DOM.

You might have been expecting it to return something along the lines of <h1/> or <h1 id="heading1">, but all it's actually returning is a reference to the <h1/> element. This reference to the <h1/> element is more useful though, as you can use it to alter attributes of the element, such as by changing the color or size. You can do this via the style object.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>example</title>
</head>
<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</para>
    <script type="text/javascript">
        var h1Element = document.getElementById("heading1");
        h1Element.style.color = "red";
    </script>
</body>
</html>

If you display this in the browser, you see that you can directly influence the attributes of the <h1/> element in script, as you have done here by changing its text color to red.

The style object points to the style attribute of an element; it allows you to change the CSS style assigned to an element. The style object will be covered later in the chapter.

The second of the two methods, getElementsByTagName(), works in the same way, but, as its name implies, it can return more than one element. If you were to go back to the example HTML document with the table and use this method to return the table cells (<td/>) in your code, you would get a node list containing a total of four table. You'd still have only one object returned, but this object would be a collection of elements. Remember that collections are array-like structures, so specify the index number for the specific element you want from the collection. You can use the square brackets if you wish; another alternative is to use the item() method of the NodeList object, like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>This is a test page</title>
</head>
<body>
    <span>Below is a table. . .   </span>
    <table border="1">
        <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
        </tr>
        <tr>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
        </tr>
    </table>

<script type="text/javascript">
        var tdElement = document.getElementsByTagName("td").item(0);
        tdElement.style.color = "red";
    </script>
</body>
</html>

If you ran this example, once again using the style object, it would alter the style of the contents of the first cell in the table. If you wanted to change the color of all the cells in this way, you could loop through the node list, like this:

<script type="text/javascript">
    var tdElements = document.getElementsByTagName("td");
    var length = tdElements.length;

    for (var i = 0; i < length; i++)
    {
        tdElements[i].style.color = "red";
    }
</script>

One thing to note about the getElementsByTagName() method is that it takes the element names within quotation marks and without the angle brackets <> that normally surround tags.

Creating Elements and Text

The Document object also boasts some methods for creating elements and text, shown in the following table.

Methods of the Document Object	Description
createElement(elementName)	Creates an element node with the specified tag name. Returns the created element.
createTextNode(text)	Creates and returns a text node with the supplied text.

The following code demonstrates the use of these methods:

var pElement = document.createElement("p");
var text = document.createTextNode("This is some text.");

This code creates a <p/> element and stores its reference in the pElement variable. It then creates a text node containing the text This is some text. and stores its reference in the text variable.

It's not enough to create nodes, however; you have to add them to the document. We'll discuss how to do this in just a bit.

Property of the Document Object: Getting the Document's Root Element

You've now got a reference to individual elements on the page, but what about the tree structure mentioned earlier? The tree structure encompasses all the elements and nodes on the page and gives them a hierarchical structure. If you want to reference that structure, you need a particular property of the document object that returns the outermost element of your document. In HTML, this should always be the <html/> element. The property that returns this element is documentElement, as shown in the following table.

Property of the Document Object	Description
documentElement	Returns a reference to the outermost element of the document (the root element, for example <html/>)

You can use documentElement as follows. If you go back to the simple HTML page, you can transfer your entire DOM into one variable like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>example</title>
</head>
<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</p>
    <script type="text/javascript">
        var container = document.documentElement;
    </script>
</body>
</html>

The variable container now contains the root element, which is <html/>. The documentElement property returned a reference to this element in the form of an object, an Element object to be precise. The Element object has its own set of properties and methods. If you want to use them, you can refer to them by using the variable name, followed by the method or property name.

container.elementObjectProperty

Fortunately, the Element object has only one property.

The Element Object

The Element object is quite simple, especially compared to the Node object (which you'll be introduced to later). It exposes only a handful of members (properties and methods).

Member Name	Description
tagName	Gets the element's tag name
getAttribute()	Gets the value of an attribute
setAttribute()	Sets an attribute with a specified value
removeAttribute()	Removes a specific attribute and its value from the element

Getting the Element's Tag Name: The tagName Property

The sole property of the Element object is a reference to the tag name of the element: the tagName property.

In the previous example, the variable container contained the <html/> element. Add the following highlighted line, which makes use of the tagName property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>example</title>
</head>
<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</p>
    <script type="text/javascript">
        var container = document.documentElement;
        alert(container.tagName);
    </script>
</body>
</html>

This code will now return proof that your variable container holds the outermost element, and by implication all other elements within it (see Figure 12-5).

Figure 12.5. Figure 12-5

Methods of the Element Object: Getting and Setting Attributes

If you want to set any element attributes, other than the style attribute, you should use the DOM-specific methods of the Element object.

The three methods you can use to return and alter the contents of an HTML element's attributes are getAttribute(), setAttribute(), and removeAttribute(), as shown in the following table.

Methods of the Element Object	Description
getAttribute(attributeName)	Returns the value of the supplied attribute. Returns null or an empty string if the attribute does not exist.
setAttribute(attributeName,value)	Sets the value of an attribute.
removeAttribute(attributeName)	Removes the value of an attribute and replaces it with the default value.

Let's take a quick look at how these methods work now.

Try It Out: Playing with Attributes

Open your text editor and type the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 12: Example 1</title>
</head>
<body>
    <p id="paragraph1">This is some text.</p>
    <script type="text/javascript">
        var pElement = document.getElementById("paragraph1");
        pElement.setAttribute("align", "center");

        alert(pElement.getAttribute("align"));

        pElement.removeAttribute("align");
    </script>
</body>
</html>

Save this as ch12_examp1.htm and open it in a browser. You'll see the text of the <p/> element in the center of the screen and an alert box displaying the text center (Figure 12-6).

Figure 12.6. Figure 12-6

When you click the OK button, you'll see the text become left-aligned (Figure 12-7).

Figure 12.7. Figure 12-7

This HTML page contains one <p/> element with an id value of paragraph1. You use this value in the JavaScript code to find the element node and store its reference in the pElement variable with the getElementById() method.

var pElement = document.getElementById("paragraph1");

Now that you have a reference to the element, you use the setAttribute() method to set the align attribute to center.

pElement.setAttribute("align", "center");

The result of this code moves the text to the center of the browser's window.

You then use the getAttribute() method to get the align attribute's value and display it in an alert box:

alert(pElement.getAttribute("align"));

This code displays the value "center" in the alert box.

Finally, you remove the align attribute with the removeAttribute() method, effectively making the text left-aligned.

Strictly speaking, the align attribute is deprecated under HTML 4.0, but you used it because it works and because it has one of the most easily demonstrable visual effects on a web page.

The Node Object

You now have your element or elements from the web page, but what happens if you want to move through your page systematically, from element to element or from attribute to attribute? This is where you need to step back to a lower level. To move among elements, attributes, and text, you have to move among nodes in your tree structure. It doesn't matter what is contained within the node, or rather, what sort of node it is. This is why you need to go back to one of the objects of the core DOM specification. Your whole tree structure is made up of these base-level Node objects.

The Node Object: Navigating the DOM

The following table lists some common properties of the Node object that provide information about the node, whether it is an element, attribute, or text, and enable you to move from one node to another.

Properties of the Node Object	Description of Property
firstChild	Returns the first child node of an element
lastChild	Returns the last child node of an element
previousSibling	Returns the previous child node of an element at the same level as the current child node
nextSibling	Returns the next child node of an element at the same level as the current child node
ownerDocument	Returns the root node of the document that contains the node (note this is not available in IE 5 or 5.5)
parentNode	Returns the element that contains the current node in the tree structure
nodeName	Returns the name of the node
nodeType	Returns the type of the node as a number
nodeValue	Gets or sets the value of the node in plain text format

Let's take a quick look at how some of these properties work. Consider this familiar example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>example</title>
</head>
<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</p>
    <script type="text/javascript">
        var h1Element = document.getElementById("heading1");
        h1Element.style.color = "red";
    </script>
</body>
</html>

You can now use h1Element to navigate your tree structure and make whatever changes you desire. The following code uses h1Element as a starting point to find the <p/> element and change its text color:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>example</title>
</head>
<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</p>
    <script type="text/javascript">
        var h1Element = document.getElementById("heading1");
        h1Element.style.color = "red";

        var pElement;
        if (h1Element.nextSibling.nodeType == 1)
        {

pElement = h1Element.nextSibling;
        }
        else
        {
            pElement = h1Element.nextSibling.nextSibling;
        }
        pElement.style.color = "red";
    </script>
</body>
</html>

This code demonstrates a fundamental difference between IE's DOM and the DOM present in other browsers. Firefox's, Safari's, Chrome's, and Opera's DOM treat everything as a node in the DOM tree, including the whitespace between elements. On the other hand, IE strips out this unnecessary whitespace. So to locate the <p/> element in the previous example, a sibling to the <h1/> element, it is required to check the next sibling's nodeType property. An element's node type is 1 (text nodes are 3). If the nextSibling's nodeType is 1, then you assign that sibling's reference to pElement. If not, you get the next sibling (the <p/> element) of h1Element's sibling (the whitespace text node).

In effect, you are navigating through the tree structure as shown in Figure 12-8.

Figure 12.8. Figure 12-8

The same principles also work in reverse. You can go back and change the code to navigate from the <p/> element to the <h1/> element.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>example</title>
</head>
<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</p>
    <script type="text/javascript">
        var pElement = document.getElementById("paragraph1");

pElement.style.color = "red";

        var h1Element;
        if (pElement.previousSibling.nodeType == 1)
        {
            h1Element = pElement.previousSibling;
        }
        else
        {
            h1Element = pElement.previousSibling.previousSibling;
        }
        h1Element.style.color = "red";
    </script>
</body>
</html>

What you're doing here is the exact opposite; you find the <p/> by passing the value of its id attribute to the getElementById() method and storing the returned element reference to the pElement variable. You then find the correct previous sibling so that your code works in all browsers, and you change its text color to red.

Try It Out: Navigating Your HTML Document Using the DOM

Up until now, you've been cheating, because you haven't truly navigated your HTML document. You've just used document.getElementById() to return an element and navigated to different nodes from there. Now let's use the documentElement property of the document object and do this properly. You'll start at the top of your tree and move down through the child nodes to get at those elements; then you'll navigate through your child nodes and change the properties in the same way as before.

Type the following into your text editor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 12: Example 2</title>
</head>
<body>
    <h1 id="heading1">My Heading</h1>
    <p id="paragraph1">This is some text in a paragraph</p>

    <script type="text/javascript">
    var htmlElement; // htmlElement stores reference to <html>
    var headElement; // headingElement stores reference to <head>
    var bodyElement; // bodyElement stores reference to <body>
    var h1Element; // h1Element stores reference to <h1>
    var pElement; // pElement stores reference to <para>

    htmlElement = document.documentElement;
    headElement = htmlElement.firstChild;

    alert(headElement.tagName);

    if (headElement.nextSibling.nodeType == 3)

{
        bodyElement = headElement.nextSibling.nextSibling;
    }
    else
    {
        bodyElement = headElement.nextSibling;
    }

    alert(bodyElement.tagName);

    if (bodyElement.firstChild.nodeType == 3)
    {
        h1Element = bodyElement.firstChild.nextSibling;
    }
    else
    {
        h1Element = bodyElement.firstChild;
    }

    alert(h1Element.tagName);
    h1Element.style.fontFamily = "Arial";

    if (h1Element.nextSibling.nodeType == 3)
    {
        pElement = h1Element.nextSibling.nextSibling;
    }
    else
    {
        pElement = h1Element.nextSibling;
    }

    alert(pElement.tagName);
    pElement.style.fontFamily = "Arial";

    if (pElement.previousSibling.nodeType==3)
    {
        h1Element = pElement.previousSibling.previousSibling
    }
    else
    {
        h1Element = pElement.previousSibling
    }
    h1Element.style.fontFamily = "Courier"
    </script>
</body>
</html>

Save this as ch12_examp2.htm. Then open the page in your browser, clicking OK in each of the message boxes until you see the page shown in Figure 12-9 (unfortunately, IE does not render the style changes until all alert boxes have been opened and closed).

Figure 12.9. Figure 12-9

You've hopefully made this example very transparent by adding several alerts to demonstrate where you are along each section of the tree. You've also named the variables with their various elements, to give a clearer idea of what is stored in each variable. (You could just as easily have named them a, b, c, d, and e, so don't think you need to be bound by this naming convention.)

You start at the top of the script block by retrieving the whole document using the documentElement property.

var htmlElement = document.documentElement;

The root element is the <html/> element, hence the name of your first variable. Now if you refer to your tree, you'll see that the HTML element must have two child nodes: one containing the <head/> element and the other containing the <body/> element. You start by moving to the <head/> element. You get there using the firstChild property of the Node object, which contains your <html/> element. You use your first alert to demonstrate that this is true.

alert(headingElement.tagName);

Your <body/> element is your next sibling across from the <head/> element, so you navigate across by creating a variable that is the next sibling from the <head/> element.

if (headingElement.nextSibling.nodeType == 3)
{
    bodyElement = headingElement.nextSibling.nextSibling;
}

else
{
    bodyElement = headingElement.nextSibling;
}

alert(bodyElement.tagName);

Here you check to see what the nodeType of the nextSibling of headingElement is. If it returns 3, (remember that nodeType 3 is a text node), you set bodyElement to be the nextSibling of the nextSibling of headingElement; otherwise you just set it to be the nextSibling of headingElement.

You use an alert to prove that you are now at the <body/> element.

alert(bodyElement.tagName);

The <body/> element in this page also has two children, the <h1/> and <p/> elements. Using the firstChild property, you move down to the <h1/> element. Again you check whether the child node is whitespace for non-IE browsers. You use an alert again to show that you have arrived at <h1/>.

if (bodyElement.firstChild.nodeType == 3)
{
    h1Element = bodyElement.firstChild.nextSibling;
}
else
{
    h1Element = bodyElement.firstChild;
}

alert(h1Element.tagName);

After the third alert, the style will be altered on your first element, changing the font to Arial.

h1Element.style.fontFamily = "Arial";

You then navigate across to the <p/> element using the nextSibling property, again checking for whitespace.

if (h1Element.nextSibling.nodeType == 3)
{
    pElement = h1Element.nextSibling.nextSibling;
}
else
{
    pElement = h1Element.nextSibling;
}

alert(pElement.tagName);

You change the <p/> element's font to Arial also.

pElement.style.fontFamily = "Arial";

Finally, you use the previousSibling property to move back in your tree to the <h1/> element and this time change the font to Courier.

if (pElement.previousSibling.nodeType==3)
{
    h1Element = pElement.previousSibling.previousSibling
}
else
{
    h1Element = pElement.previousSibling
}

h1Element.style.fontFamily = "Courier";

This is a fairly easy example to follow because you're using the same tree structure you created with diagrams, but it does show how the DOM effectively creates this hierarchy and that you can move around within it using script.

Methods of the Node Object

While the Node object's properties enable you to navigate the DOM, its methods provide the completely different ability to add and remove nodes from the DOM, thus fundamentally altering the structure of the HTML document. The following table lists these methods.

Methods of Node Objects	Description
appendChild(newNode)	Adds a new node object to the end of the list of child nodes. This method returns the appended node.
cloneNode(cloneChildren)	Returns a duplicate of the current node. It accepts a Boolean value. If the value is true, then the method clones the current node and all child nodes. If the value is false, only the current node is cloned and child nodes are left out of the clone.
hasChildNodes()	Returns true if a node has any child nodes and false if not.
insertBefore(newNode,referenceNode)	Inserts a new node object into the list of child nodes before the node stipulated by referenceNode. Returns the inserted node.
removeChild(childNode)	Removes a child node from a list of child nodes of the node object. Returns the removed node.

Try It Out: Creating HTML Elements and Text with DOM Methods

You'll create a web page with just paragraph <p/> and heading <h1/> elements, but instead of HTML you'll use the DOM properties and methods to place these elements on the web page. Start up your preferred text editor and type the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 12: Example 3</title>
</head>
<body>
    <script type="text/javascript">
        var newText = document.createTextNode("My Heading");
        var newElem = document.createElement("h1");

        newElem.appendChild(newText);
        document.body.appendChild(newElem);

        newText = document.createTextNode("This is some text in a paragraph");
        newElem = document.createElement("p");

        newElem.appendChild(newText);
        document.body.appendChild(newElem);
    </script>
</body>
</html>

Save this page as ch12_examp3.htm and open it in a browser (Figure 12-10).

It all looks a bit dull and tedious, doesn't it? And yes, you could have done this much more simply with HTML. That isn't the point, though. The idea is that you use DOM properties and methods, accessed with JavaScript, to insert these features. The first two lines of the script block are used to define the variables in your script, which are initialized to hold the text you want to insert into the page and the HTML element you wish to insert.

var newText = document.createTextNode("My Heading");
var newElem = document.createElement("h1");

You start at the bottom of your tree first, by creating a text node with the createTextNode() method. Then use the createElement() method to create an HTML heading.

At this point, the two variables are entirely separate from each other. You have a text node, and you have an <h1/> element, but they're not connected. The next line enables you to attach the text node to your HTML element. You reference the HTML element you have created with the variable name newElem, use the appendChild() method of your node, and supply the contents of the newText variable you created earlier as a parameter.

newElem.appendChild(newText);

Figure 12.10. Figure 12-10

Let's recap. You created a text node and stored it in the newText variable. You created an <h1/> element and stored it in the newElem variable. Then you appended the text node as a child node to the <h1/> element. That still leaves you with a problem: You've created an element with a value, but the element isn't part of your document. You need to attach the entirety of what you've created so far to the document body. Again, you can do this with the appendChild() method, but this time supply it to the document.body object (which, too, is a Node).

document.body.appendChild(newElem);

This completes the first part of your code. Now all you have to do is repeat the process for the <p/> element.

newText = document.createTextNode("This is some text in a paragraph");
newElem = document.createElement("p");

newElem.appendChild(newText);
document.body.appendChild(newElem);

You create a text node first; then you create an element. You attach the text to the element, and finally you attach the element and text to the body of the document.

It's important to note that the order in which you create nodes does not matter. This example had you create the text nodes before the element nodes; if you wanted, you could have created the elements first and the text nodes second.

However, the order in which you append nodes is very important for performance reasons. Updating the DOM can be an expensive process, and performance can suffer if you make many changes to the DOM. For example, this example updated the DOM only two times by appending the completed elements to the document's body. It would require four updates if you appended the element to the document's body and then appended the text node to the element. As a rule of thumb, only append completed element nodes (that is, the element, its attributes, and any text) to the document whenever you can.

Now that you can navigate and make changes to the DOM, let's look further into manipulating DOM nodes.

As you saw in the previous section, the DOM holds the tools you need to find and access HTML elements; you used the getElementById() method quite frequently, and through examples you saw how easy it was to find specific elements in the page.

When scripting the DOM, chances are you have a pretty good idea of what elements you want to manipulate. The easiest way to find those elements is to use the id attribute and thus the getElementById() method. Don't be afraid to assign id attributes to your HTML elements; it is by far the easiest and most efficient way to find elements within the page.

Probably the most common DOM manipulation is to change the way an element looks. Such a change can create an interactive experience for visitors to your web site and can even be used to alert them to important information or that an action is required by them. Changing the way an element looks consists almost exclusively of changing CSS properties for an HTML element. You can do this two ways through JavaScript:

Using the style Property

In order to change specific CSS properties, you must look to the style property. All modern browsers implement this object, which maps directly to the element's style attribute. This object contains CSS properties, and by using it you can change any CSS property that the browser supports. You've already seen the style property in use, but here's a quick refresher:

element.style.cssProperty = value;

The CSS property names generally match those used in a CSS style sheet; therefore, changing the text color of an element requires the use of the color property, like this:

var divAdvert = document.getElementById("divAdvert");  //Get the desired element

divAdvert.style.color = "blue";  //Change the text color to blue

There are some cases, however, in which the property name is a little different from the one seen in a CSS file. CSS properties that contain a hyphen (-) are a perfect example of this exception. In the case of these properties, you remove the hyphen and capitalize the first letter of the word that follows the hyphen. The following code shows the incorrect and correct ways to do this:

divAdvert.style.background-color = "gray";  //Wrong

divAdvert.style.backgroundColor = "gray";  //Correct

You can also use the style object to retrieve styles that have previously been declared. However, if the style property you try to retrieve has not been set with the style attribute (inline styles) or with the style object, you will not retrieve the property's value. Consider the following HTML containing a style sheet and <div/> element:

<style type="text/css">
#divAdvert
{
    background-color: gray;
}
</style>

<div id="divAdvert" style="color: green">I am an advertisement.</div>

When the browser renders this element, it will have green text on a gray background. If you had used the style object to retrieve the value of both the background-color and color properties, you'd get the following mixed results:

var divAdvert = document.getElementById("divAdvert");  // Get the desired element
alert(divAdvert.style.backgroundColor);  // Alerts an empty string
alert(divAdvert.style.color);  // Alerts green

You get these results because the style object maps directly to the style attribute of the element. If the style declaration is set in the <style/> block, you cannot retrieve that property's value with the style object.

Try It Out: Using the style Object

Let's look at a simple example of changing the appearance of some text by using the style object.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 12: Example 4</title>
    <style type="text/css">
    #divAdvert
    {
        font: 12pt arial;
    }
    </style>
    <script type="text/javascript">
    function divAdvert_onMouseOver()
    {
        var divAdvert = document.getElementById("divAdvert");
        divAdvert.style.fontStyle = "italic";
        divAdvert.style.textDecoration = "underline";
    }

    function divAdvert_onMouseOut()
    {
        var divAdvert = document.getElementById("divAdvert");
        divAdvert.style.fontStyle = "normal";
        divAdvert.style.textDecoration = "none";
    }
    </script>
</head>
<body>
    <div id="divAdvert" onmouseover="divAdvert_onMouseOver()"
        onmouseout="divAdvert_onMouseOut()">
        Here is an advertisement.
    </div>
</body>
</html>

Save this as ch12_examp4.htm. When you run this in your browser, you should see a single line of text, as shown in Figure 12-11.

Figure 12.11. Figure 12-11

Roll your mouse over the text, and you'll see it become italicized and underlined, as shown in Figure 12-12.

Figure 12.12. Figure 12-12

And when you move your mouse off of the text, it returns to normal.

In the page's body, a <div/> element is defined with an id of divAdvert. Hook up the mouseover and mouseout events to the divAdvert_onMouseOver() and divAdvert_onMouseOut() functions, respectively, which are defined in the <script/> block in the head of the page.

When the mouse pointer enters the <div/> element, the divAdvert_onMouseOver() function is called.

function divAdvert_onMouseOver()
{
    var divAdvert = document.getElementById("divAdvert");
    divAdvert.style.fontStyle = "italic";
    divAdvert.style.textDecoration = "underline";
}

Before you can do anything to the <div/> element, you must first retrieve it. You do this simply by using the getElementById() method. Now that you have the element, you manipulate its style by first italicizing the text with the fontStyle property. Next, you underline the text by using the textDecoration property and assigning its value to underline.

Naturally, you do not want to keep the text italicized and underlined; so the mouseout event allows you to change the text back to its original state. When this event fires, the divAdvert_onMouseOut() function is called.

function divAdvert_onMouseOut()
{
    var divAdvert = document.getElementById("divAdvert");
    divAdvert.style.fontStyle = "normal";
    divAdvert.style.textDecoration = "none";
}

The code for this function resembles the code for the divAdvert_onMouseOver() function. First, you retrieve the divAdvert element and then set the fontStyle property to normal, thus removing the italics. Then you set the textDecoration to none, which removes the underline from the text.

element.className = sNewClassName;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 12: Example 5</title>
    <style type="text/css">
        .defaultStyle
        {
            font: normal 12pt arial;
            text-decoration: none;
        }
        .newStyle
        {
            font: italic 12pt arial;
            text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
    function divAdvert_onMouseOver()
    {
        var divAdvert = document.getElementById("divAdvert");
        divAdvert.className = "newStyle";
    }

    function divAdvert_onMouseOut()
    {
        var divAdvert = document.getElementById("divAdvert");
        divAdvert.className = "defaultStyle";
    }
    </script>
</head>
<body>
    <div id="divAdvert" class="defaultStyle" onmouseover="divAdvert_onMouseOver()"
        onmouseout="divAdvert_onMouseOut()">
        Here is an advertisement.
    </div>
</body>
</html>

.defaultStyle
{
    font: normal 12pt arial;
    text-decoration: none;

}

.newStyle
{
    font: italic 12pt arial;
    text-decoration: underline;
}

<div id="divAdvert" class="defaultStyle" onmouseover="divAdvert_onMouseOver()"
    onmouseout="divAdvert_onMouseOut()">
    Here is an advertisement.
</div>

function divAdvert_onMouseOver()
{
    var divAdvert = document.getElementById("divAdvert");
    divAdvert.className = "newStyle";
}

function divAdvert_onMouseOut()
{
    var divAdvert = document.getElementById("divAdvert");
    divAdvert.className = "defaultStyle";
}

Changing the appearance of an element is an important pattern in DHTML, and it finds its place in many DHTML scripts. However, there is more to DHTML than just changing the way content appears on the page; you can also change the position of an element with JavaScript.

Moving content with JavaScript is just as easy as using the style object. You use the position property to change the type of position desired, and by using the left and top properties, you can position the element.

var divAdvert = document.getElementById("divAdvert");

divAdvert.style.position = "absolute";
divAdvert.style.left = "100px"; //Set the left position
divAdvert.style.top = "100px";  //Set the right position

This code first retrieves the divAdvert element. Then it sets the element's position to absolute and moves the element 100 pixels from the left and top edges. Notice the addition of px to the value assigned to the positions. Many browsers require you to specify a unit when assigning a positional value; otherwise, the browser will not position the element.

Try It Out: Moving an Element Around

Moving an element around on the page, as you've seen, is quite similar to changing other styles with the style object. However, the ability to move an element on the page is used quite often, and you will definitely see it later in the chapter. Therefore, you are going to build a page that enables you to specify the location of an element through form fields.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 12: Example 6</title>
    <style type="text/css">
    #divBox
    {
        position: absolute;
        background-color: silver;
        width: 150px;
        height: 150px;
    }
    input
    {
        width: 100px;
    }
    </style>
    <script type="text/javascript">
    function moveBox() {
        var divBox = document.getElementById("divBox");
        var inputLeft = document.getElementById("inputLeft");

var inputTop = document.getElementById("inputTop");

        divBox.style.left = parseInt(inputLeft.value) + "px";
        divBox.style.top = parseInt(inputTop.value) + "px";
    }
    </script>
</head>
<body>
    <div id="divBox">
        <form id="formBoxController" onsubmit="moveBox(); return false;"
            action="">
            <para>
                Left:
                <input type="text" id="inputLeft" />
            </para>
            <para>
                Top:
                <input type="text" id="inputTop" />
            </para>
            <para>
                <input type="submit" value="Move The Box" />
            </para>
        </form>
    </div>
</body>
</html>

Save this file as ch12_examp6.htm. When you load the page into your browser, you should see a silver box in the upper-left corner of the screen. Inside this box, you'll see a form with two fields and a button, as shown in Figure 12-13.

Figure 12.13. Figure 12-13

When you enter numerical values in the text fields and click the button, the box will move to the coordinates you specified. Figure 12-14 shows the box moved to 100,100.

Figure 12.14. Figure 12-14

In the body of the page, you define a <div/> tag with an id of divBox.

<div id="divBox"></div>

Inside this element is a form consisting of three <input/> elements. Two of these are text boxes in which you can input the left and top positions to move the <div/> to, and these have ids of inputLeft and inputTop, respectively. The third <input/> is a Submit button.

<div id="divBox">
    <form id="formBoxController" onsubmit="moveBox(); return false;" action="">
        <p>Left: <input type="text" value="0" id="inputLeft" /></p>
        <p>Top: <input type="text" value="0" id="inputTop" /></p>
        <p><input type="submit" value="Move The Box" /></p>
    </form>
</div>

When you click the Submit button, the browser fires the submit event for the form. When a submit button is pressed, the browser attempts to send data to the web server. This attempt at communication causes the browser to reload the page, making any change you made through DHTML reset itself. Therefore, you must force the browser to not reload the page. You do this by setting the submit event to return a value of false.

In order for the <div/> element to be moved around on the page, it needs to be positioned. This example positions the element absolutely, although it would be possible to position it relatively as well.

#divBox
{
    position: absolute;

background-color: silver;
    width: 150px;
    height: 150px;
}

Aside from the position, you also specify the box to have a background color of silver, and set the height and width to be 150 pixels each, to make it a square. At this size, however, the text boxes in the form actually extend past the box's borders. In order to fix this, set a rule for the <input/> element as well.

input
{
    width: 100px;
}

By setting the <input/> elements to be 100 pixels wide, you can fit everything nicely into the box. So at this point, the HTML is primarily finished and it's styled. All that remains is to write the JavaScript to retrieve the values from the form fields and move the box to the coordinates provided by the form.

The function responsible for this is called moveBox(), and it is the only function on this page.

function moveBox() {
    var divBox = document.getElementById("divBox");  //Get the box
    var inputLeft = document.getElementById("inputLeft");  //Get one form field
    var inputTop = document.getElementById("inputTop");  //Get the other one

The function starts by retrieving the HTML elements needed to move the box. First it gets the <div/> element itself, followed by the text boxes for the left and top positions, and stores them in the inputLeft and inputTop variables, respectively. With the needed elements selected, you can now move the box.

divBox.style.left = parseInt(inputLeft.value) + "px";
    divBox.style.top = parseInt(inputTop.value) + "px";
}

These two new lines to moveBox() do just that. In the first line, you use the value property to retrieve the value of the text box for the left position. You pass that value to the parseInt() function because you want to make sure that value is an integer. Then append px to the number, making sure that all browsers will position the box correctly. Now do the same thing for positioning the top: get the value from the inputTop text box, pass it to parseInt(), and append px to it.

As you can see, moving an element around the page is quite simple and is a building block toward another effect: animation.

Changing the appearance and position of an element are important patterns in DHTML, and they find their places in many DHTML scripts. Perhaps the most creative use of DHTML is in animating content on the page. You can perform a variety of animations with DHTML. You can fade text elements or images in and out, give them a swipe animation (making it look like as if they are wiped onto the page), and animate them to move around on the page.

Animation can give important information the flair it needs to be easily recognized by your reader, as well as adding a "that's cool" factor. Performing animation with DHTML follows the same principles of any other type of animation: You make seemingly insignificant changes one at a time in a sequential order until you reach the end of the animation. Essentially, with any animation, you have the following requisites:

Animating an absolutely positioned element, as you're going to do in this section, is no different. First, with CSS, position the element at the start location. Then perform the animation up until you reach the end point, which signals the end of the animation.

In this section, you'll learn how to animate content to bounce back and forth between two points. To do this, you need one important piece of information: the content's current location.

var endPointX = 394;

if (element.offsetLeft < endPointX)
{
    // Continue animation
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
    <title>Moving Content</title>
    <style type="text/css">
    #divAdvert
    {
        position: absolute;
        font: 12px Arial;
        top: 4px;
        left: 0px;
    }
    </style>
    <script type="text/javascript">
    var switchDirection = false;

    function doAnimation() {
        var divAdvert = document.getElementById("divAdvert");
        var currentLeft = divAdvert.offsetLeft;
        var newLocation;

        if (switchDirection == false)
        {
            newLocation = currentLeft + 2;

            if (currentLeft >= 400)
            {
                switchDirection = true;
            }
        }
        else
        {
            newLocation = currentLeft - 2;

            if (currentLeft <= 0)
            {
                switchDirection = false;
            }
        }

        divAdvert.style.left = newLocation + "px";
    }
    </script>
</head>
<body onload="setInterval(doAnimation, 10)">
    <div id="divAdvert">Here is an advertisement.</div>
</body>
</html>

<div id="divAdvert">Here is an advertisement.</div>

#divAdvert
{
    position: absolute;
    font: 12pt arial;
    top: 4px;
    left: 0px;
}

var switchDirection = false;

function doAnimation()
{
    var divAdvert = document.getElementById("divAdvert");  //Get the element
    var currentLeft = divAdvert.offsetLeft; //Get the current left position
    var newLocation; //Will store the new location

if (switchDirection == false)
{
    newLocation = currentLeft + 2;

    if (currentLeft >= 400)
    {
        switchDirection = true;
    }
}

else
{
    newLocation = currentLeft - 2;

    if (currentLeft <= 0)
    {
        switchDirection = false;
    }
}

divAdvert.style.left = newLocation + "px";
}

<body onload="setInterval(doAnimation, 10)">

The DOM standard describes an Event object, which provides information about the element that has generated an event and enables you to retrieve it in script. If you want to make it available in script, it must be passed as a parameter to the function connected to the event handler.

<p ondblclick="handle(event)">Paragraph</p>

<script type="text/javascript">
function handle(e)
{
    alert(e.type);
}
</script>

<p ondblclick="handle(event)">Paragraph</p>
<h1 onclick="handle(event)">Heading 1</h1>
<span onmouseover="handle(event)">Special Text</span>

<script type="text/javascript">
function handle(e)
{
    alert(e.type);
}
</script>

<p ondblclick="handle(event)">Paragraph</p>
<h1 onclick="handle(event)">Heading 1</h1>
<span onmouseover="handle(event)">Special Text</span>

<script type="text/javascript">
function handle(e)
{
    if (e.type == "mouseover")
    {
        alert("You moved over the Special Text");
    }
}
</script<

<p id="p">Paragraph</p>
<h1 id="h1">Heading 1</h1>
<span id="span">Special Text</span>

<script type="text/javascript">
function handle(e)
{
    if (e.type == "mouseover")

{
        alert("You moved over the Special Text");
    }
}

document.getElementById("p").ondblclick = handle;
document.getElementById("h1").onclick = handle;
document.getElementById("span").onmouseover = handle;
</script<

Using Event Data

The standard outlines several properties of the Event object that offer information about that event: what element it happened at, what type of event took place, and what time it occurred? These are all pieces of data offered by the Event object. The following table lists the properties outlined in the specification.

Properties of the Event Object	Description
bubbles	Indicates whether an event can bubble — passing control from one element to another starting from the event target and bubbling up the hierarchy.
cancelable	Indicates whether an event can have its default action canceled.
currentTarget	Indicates which the event target whose event handlers are currently being processed.
eventPhase	Indicates which phase of the event flow an event is in.
target	Indicates which element caused the event; in the DOM event model, text nodes are a possible target of an event.
timestamp	Indicates at what time the event occurred.
type	Indicates the name of the event.

Secondly, the DOM event model introduces a MouseEvent object, which deals with events generated specifically by the mouse. This is useful because you might need more specific information about the event, such as the position in pixels of the cursor, or the element the mouse has come from.

Properties of the MouseEvent Object	Description
altKey	Indicates whether the Alt key was pressed when the event was generated.
button	Indicates which button on the mouse was pressed.
clientX	Indicates where in the browser window, in horizontal coordinates, the mouse pointer was when the event was generated.
clientY	Indicates where in the browser window, in vertical coordinates, the mouse pointer was when the event was generated.
ctrlKey	Indicates whether the Ctrl key was pressed when the event was generated.
metaKey	Indicates whether the meta key was pressed when the event was generated.
relatedTarget	Used to identify a secondary event target. For mouseover events, this property references the element the mouse pointer exited. For mouseout events, this property references the element the mouse pointer entered.
screenX	Indicates the horizontal coordinates relative to the origin in the screen coordinates, the mouse pointer was when the event was generated.
screenY	Indicates the vertical coordinates relative to the origin in the screen coordinates, the mouse pointer was when the event was generated.
shiftKey	Indicates whether the Shift key was pressed when the event was generated.

Although any event might create an Event object, only a select set of events can generate a MouseEvent object. On the occurrence of a MouseEvent event, you'd be able to access properties from the Event object and the MouseEvent object. With a non-mouse event, none of the MouseEvent object properties in the preceding table would be available. The following mouse events can create a MouseEvent event object:

• click occurs when a mouse button is clicked (pressed and released) with the pointer over an element or text.

• mousedown occurs when a mouse button is pressed with the pointer over an element or text.

• mouseup occurs when a mouse button is released with the pointer over an element or text.

• mouseover occurs when a mouse button is moved onto an element or text.

• mousemove occurs when a mouse button is moved and it is already on top of an element or text.

• mouseout occurs when a mouse button is moved out and away from an element or text.

Try It Out: Using the DOM Event Model

Take a quick look at an example that uses some properties of the MouseEvent object.

Open a text editor and type the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 12: Example 8</title>
    <style type="text/css">
    .underline
    {
        color: red;
        text-decoration: underline;
    }
    </style>
    <script type="text/javascript">
    function handleEvent(e)
    {
        if (e.target.tagName == "P")
        {
            if (e.type == "mouseover")
            {
                e.target.className = "underline";
            }

            if (e.type == "mouseout")
            {
                e.target.className = "";
            }
        }

        if (e.type == "click")
        {
            alert("You clicked the mouse button at the X:"
                + e.clientX + " and Y:" + e.clientY + " coordinates");
        }
    }

    document.onmouseover = handleEvent;
    document.onmouseout = handleEvent;
    document.onclick = handleEvent;
    </script>
</head>
<body>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
</body>
</html>

Save this as ch12_examp8.htm and run it in your browser. When you move your mouse over one of the paragraphs, you'll notice its text changes color to red and it becomes underlined. Click anywhere in the page, and you'll see an alert box like Figure 12-15.

Figure 12.15. Figure 12-15

Now click OK, move the pointer in the browser window, and click again. A different result appears.

This example is consistent with the event-handling behavior: The browser waits for an event, and every time that event occurs it raises the corresponding function. It will continue to wait for the event until you exit the browser or that particular web page. In this example, you assign event handlers for the mouseover, mouseout, and click events on the document object.

document.onmouseover = handleEvent;
document.onmouseout = handleEvent;
document.onclick = handleEvent;
One function, handleEvent() handles all three of these events.

Whenever any of these events fire, the handleClick() function is raised and a new MouseEvent object is generated. Remember that MouseEvent objects give you access to Event object properties as well as MouseEvent object properties, and you use some of them in this example.

The function accepts the MouseEvent event object and assigns it the reference e.

function handleEvent(e)
{
    if (e.target.tagName == "P")
    {

Inside the function, the first thing you do is check if the event target (the element that caused the event) has a tagName of P. If the target is a paragraph element, then the next bit of information you need to find is what kind of event took place by using the type property.

if (e.type == "mouseover")
        {
            e.target.className = "underline";

}

        if (e.type == "mouseout")
        {
            e.target.className = "";
        }
    }

If the event is a mouseover, then the paragraph's CSS class is assigned the underline class defined in the page's style sheet. If the event type is mouseout, then the element's className property is cleared, which returns the text to its original style. This style-changing code runs only if the element that caused the event is a paragraph element.

Next, the function determines if the user clicked their mouse by again checking the type property.

if (e.type == "click")
    {
        alert("You clicked the mouse button at the X:"
            + e.clientX + " and Y:" + e.clientY + " coordinates");
    }
}

If the user did indeed click somewhere in the page, then you use the alert() method to display the contents of the clientX and clientY properties of the mouse event object on the screen.

The MouseEvent object supplied to this function is overwritten and re-created every time you generate an event, so the next time you click the mouse or move the pointer it creates a new MouseEvent object containing the coordinates for the x and y positions and the information on the element that caused the event to fire. One problem that precludes greater discussion of the DOM event model is the fact that not all browsers support it in any detail. Specifically, IE, the most popular browser, doesn't fully support it. Despite the lack of support for the DOM standard, you can still acquire the same useful information on a given event with IE's event model.

IE's event model remains relatively unchanged since the introduction of IE4 in 1997. It incorporates the use of a global event object (it is a property of the window object), and one such object exists for each open browser window. The browser updates the event object every time the user causes an event to occur, and it provides information similar to that of the standard DOM Event object.

<p ondblclick="handle()">Paragraph</p>

<script type="text/javascript">
function handle()
{
    alert(window.event.type);
}
</script>

<p id="p">Paragraph</p>
<h1 id="h1">Heading 1</h1>
<span id="span">Special Text</span>

<script type="text/javascript">
function handle()
{
    if (event.type == "mouseover")
    {
        alert("You moved over the Special Text");
    }
}

document.getElementById("p").ondblclick = handle;
document.getElementById("h1").onclick = handle;
document.getElementById("span").onmouseover = handle;
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 12: Example 9</title>
    <style type="text/css">
    .underline
    {
        color: red;
        text-decoration: underline;
    }
    </style>
    <script type="text/javascript">
    function handleEvent()
    {
        if (event.srcElement.tagName == "P")
        {
            if (event.type == "mouseover")
            {
                event.srcElement.className = "underline";
            }

if (event.type == "mouseout")
            {
                event.srcElement.className = "";
            }
        }

        if (event.type == "click")
        {
            alert("You clicked the mouse button at the X:"
                + event.clientX + " and Y:" + event.clientY + " coordinates");
        }
    }

    document.onmouseover = handleEvent;
    document.onmouseout = handleEvent;
    document.onclick = handleEvent;
    </script>
</head>
<body>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
</body>
</html>

document.onmouseover = handleEvent;
document.onmouseout = handleEvent;
document.onclick = handleEvent;

function handleEvent()
{
    if (event.srcElement.tagName == "P")
    {

if (event.type == "mouseover")
        {
            event.srcElement.className = "underline";
        }

        if (event.type == "mouseout")
        {

event.srcElement.className = "";
        }
    }

if (event.type == "click")
    {
        alert("You clicked the mouse button at the X:"
            + event.clientX + " and Y:" + event.clientY + " coordinates");
    }
}

As previously mentioned, you use the DOM to load, read, and manipulate XML data; so you learned most of what you need to manipulate XML within the web browser from the previous sections in the chapter.

The first task is to read the XML document. This is where most cross-browser problems are located because IE, you guessed it, doesn't follow the DOM standard, whereas Firefox, Safari, Chrome, and Opera do. The good news is that once the XML document is loaded, the differences between the browsers are smaller, although Microsoft has added a lot of useful (but nonstandard) extensions to its implementation.

Internet Explorer relies upon the ActiveXObject() object and the MSXML library to fetch and open XML documents. A variety of ActiveX objects are available for scripting; to create an ActiveX object, simply call the ActiveXObject() constructor and pass a string containing the version of the ActiveX object you wish to create.

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load("myfile.xml");

This code creates an XML DOM object that enables you to load and manipulate XML documents by using the version string "Microsoft.XMLDOM". When the XML DOM object is created, load an XML document by using the load() method. This code loads a fictitious file called myfile.xml.

There are multiple versions of the Microsoft MSXML library, with each newer version offering more features and better performance than the one before. However, the user's computer must have these versions installed before you can use them, and the version selection code can become complex. Thankfully, Microsoft recommends checking for only two versions of MSXML. Their version strings are as follows:

You want to use the latest version possible when creating an XML DOM, and the following function does this:

function createDocument()
{
    var xmlDoc;

    if (window.ActiveXObject)
    {
        var versions =
        [
            "Msxml2.DOMDocument.6.0",
            "Msxml2.DOMDocument.3.0"
        ];

        for (var i = 0; i < versions.length; i++)
        {
            try
            {
                xmlDoc = new ActiveXObject(versions[i]);
                return xmlDoc;
            }
            catch (error)
            {
                //do nothing here
            }
        }
    }

    return null;
}

This code defines the createDocument() function. Its first line creates the xmlDoc variable. This is a temporary variable used in the creation of an XML DOM. The next line of code is an if statement, and it checks to see if the browser is IE by seeing if window.ActiveXObject exists. If the condition is true, then an array called versions is created, and the two MSXML versions are added as elements to the array.

var versions =
[
    "Msxml2.DOMDocument.6.0",
    "Msxml2.DOMDocument.3.0"
];

The order in which they're added is important; you want to always check for the latest version first, so the version strings are added with the newest at index 0.

Next is a for loop to loop through the elements of the versions array. Inside the loop is a try. . .catch statement.

for (var i = 0; i < versions.length; i++)
{
    try
    {
        xmlDoc = new ActiveXObject(versions[i]);
        return xmlDoc;
    }
    catch (error)
    {
        //do nothing here
    }
}

If the ActiveXObject object creation fails in the try block, then code execution drops to the catch block. Nothing happens at this point: The loop iterates to the next index in versions and attempts to create another ActiveXObject object with the other MSXML version strings. If every attempt fails, then the loop exits and returns null. Use the createDocument() function like this:

var xmlDoc = createDocument();

By using this function, you can create the latest MSXML XML DOM object easily.

Before you actually attempt to manipulate the XML file, make sure it has completely loaded into the client's browser cache. Otherwise, you're rolling the dice each time the page is viewed and running the risk of a JavaScript error being thrown whenever the execution of your script precedes the complete downloading of the XML file in question. Fortunately, there are ways to detect the current download state of an XML file.

The async property denotes whether the browser should wait for the specified XML file to fully load before proceeding with the download of the rest of the page. This property, whose name stands for asynchronous, is set by default to true, meaning the browser will not wait on the XML file before rendering everything else that follows. Setting this property to false instructs the browser to load the file first and then, and only then, to load the rest of the page.

var xmlDoc = createDocument();
xmlDoc.async = false; //Download XML file first, then load rest of page.
xmlDoc.load("myfile.xml");

The simplicity of the async property is not without its flaws. When you set this property to false, IE will stall the page until it makes contact and has fully received the specified XML file. When the browser is having trouble connecting and/or downloading the file, the page is left hanging like a monkey on a branch. This is where the onreadystatechange event handler and readyState property can help (as long as the async property is true).

The readyState property of IE exists for XML objects and many HTML objects, and returns the current loading status of the object. The following table shows the four possible return values.

The value you're interested in here is the last one, 4, which indicates the object has fully loaded. To use the readyState property, assign a function to handle the readystatechange event, which fires every time the readyState changes.

function xmlDoc_readyStateChange()
{
    //Check for the readyState. If it's 4, it's loaded!
    if (xmlDoc.readyState == 4)
    {
        alert("XML file loaded!");
    }
}

var xmlDoc = createDocument();
xmlDoc.onreadystatechange = xmlDoc_readyStateChange;

xmlDoc.load("myfile.xml");

This code first creates a function called xmlDoc_readyStateChange(). Use this function to handle the readystatechange event. Inside the function, check the readyState property to see if its value is equal to 4. If it is, then the XML file is completely loaded and the alert text "XML file loaded!" is displayed. Next, create the XML DOM object and assign the xmlDoc_readyStateChange() function to the onreadystatechange event handler. The last line of code initiates the loading of myfile.xml.

Loading an XML document in Firefox and Opera is a little different from doing the same thing in IE, as these browsers use a more standards-centric approach. Creating an XML DOM doesn't require the use of an add-on as it does in IE; the DOM is a part of the browser and JavaScript implementation.

var xmlDoc = document.implementation.createDocument("","",null);
xmlDoc.load("myfile.xml");

This code creates an empty DOM object by using the createDocument() method of the document.implementation object. After the DOM object is created, use the load() method to load an XML document; it is supported by Firefox and Opera as well.

Much like IE, Firefox and Opera support the async property, which allows the file to be loaded asynchronously or synchronously. The behavior of loading synchronously is the same in these browsers as in IE. However, things change when you want to load a file asynchronously.

Not surprising, Firefox and Opera use a different implementation from IE when it comes to checking the load status of an XML file. In fact, these browsers do not enable you to check the status with something like the readyState property. Instead, they expose an onload event handler that executes when the file is loaded and the DOM object is ready to use.

function xmlDoc_load()
{
    alert("XML is loaded!");
}

var xmlDoc = document.implementation.createDocument("","",null);
xmlDoc.onload = xmlDoc_load;
xmlDoc.load("myfile.xml");

This code loads the fictitious file myfile.xml in asynchronous mode. When the load process completes, the load event fires and calls xmlDoc_load(), which then shows the text XML is loaded! to the user.

As you can see, the different ways of creating XML DOM objects require you to seek a cross-browser solution. You can easily do this with object detection to determine which browser is in use. In fact, you can easily edit the createDocument() function to include Firefox and Opera support. Look at the following code:

function createDocument()
{
    var xmlDoc;

    if (window.ActiveXObject)
    {
        var versions =
        [
            "Msxml2.DOMDocument.6.0",
            "Msxml2.DOMDocument.3.0"
        ];

for (var i = 0; i < versions.length; i++)
        {
            try
            {
                xmlDoc = new ActiveXObject(versions[i]);
                return xmlDoc;
            }
            catch (error)
            {
                //do nothing here
            }
        }
    }
    else if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc = document.implementation.createDocument("","",null);
        return xmlDoc;
    }
    return null;
}

The code highlighted in gray is the only new code added to the function. It first checks if the implementation object and implementation.createDocument method exist, and, if so, it creates an XML DOM for DOM supporting browsers with document.implementation.createDocument() and returns the DOM object to the caller. Using the function is exactly as you saw earlier, but now it works across IE, Firefox, and Opera.

var xmlDoc = createDocument();
xmlDoc.async = false;
xmlDoc.load("myfile.xml");

Now that you know how to load XML documents, let's jump right into building your first XML-enabled JavaScript application, a message-of-the-day display.

To begin, use the following simple XML file. You'll retrieve the file and then display the daily message using DHTML. Following is the XML file called motd.xml:

<?xml version="1.0"?>

<messages>
    <daily>Today is Sunday.</daily>
    <daily>Today is Monday.</daily>
    <daily>Today is Tuesday.</daily>
    <daily>Today is Wednesday.</daily>
    <daily>Today is Thursday.</daily>
    <daily>Today is Friday.</daily>
    <daily>Today is Saturday.</daily>
</messages>

As you can see, this basic XML file is populated with a different message for each day of the week.

Next is the HTML page, with the createDocument() function added in the script block.

<html>
<head>
    <title>Message of the Day</title>
    <script type="text/javascript">
    function createDocument()
    {
        var xmlDoc;

        if (window.ActiveXObject)
        {
            var versions =
            [
                "Msxml2.DOMDocument.6.0",
                "Msxml2.DOMDocument.3.0"
            ];

            for (var i = 0; i < versions.length; i++)
            {
                try
                {
                    xmlDoc = new ActiveXObject(versions[i]);
                    return xmlDoc;
                }
                catch (error)
                {
                    //do nothing here
                }
            }
        }
        else if (document.implementation
                 && document.implementation.createDocument)
        {
            xmlDoc = document.implementation.createDocument("","",null);
            return xmlDoc;
        }

        return null;
    }

    //More code to come
    </script>
</head>

Before you dig into the body of the page, there's one more function to add to the head of the page. This function is called getDailyMessage(), which retrieves and returns the message of the day. Add it below the createDocument() function definition.

function getDailyMessage()
    {

var messages = xmlDoc.getElementsByTagName("daily");
        var dateobj = new Date();
        var today = dateobj.getDay();

        return messages[today].firstChild.nodeValue;
    }

First, use the getElementsByTagName() method to retrieve the <daily/> elements. As you already know, this will return a node list of all the <daily/> elements. The next task is to find a numerical representation of the day of the week. Do this by first creating a Date object and using its getDay() method. This gives you a digit between 0 and 6, with 0 being Sunday, 1 being Monday, and so on; the digit is assigned to the today variable. Finally, use that variable as an index of the messages node list to select the correct <daily/> element and retrieve its text.

You may have noticed that xmlDoc in getDailyMessage() isn't declared anywhere in the head of the HTML document. It is used in createDocument(), but that variable is declared within the context of the function. You actually declare the global xmlDoc in the body of the HTML page.

<body>
<div id="messageContainer"></div>

<script type="text/javascript">
    var xmlDoc = createDocument();
    xmlDoc.async = false;
    xmlDoc.load("motd.xml");

    document.getElementById("messageContainer").innerHTML = getDailyMessage();
</script>
</body>
</html>

The first HTML element found in the body is a <div/> element with an id of messageContainer. Use this <div/> to display the message of the day.

Following the <div/> is the last <script/> element in the page. In this code block, you create a DOM document and assign it to the global xmlDoc variable. Then load the motd.xml file synchronously and set the message container's innerHTML to the message of the day by calling getDailyMessage().

Try It Out: Tabulating Doggie Data

In this example, you will write an application that uses an XML document containing data about one of your author's dogs. Open your text editor and type the following:

<html>
<head>
    <title>Chapter 12: Example 11</title>
    <script type="text/javascript">
    function createDocument()
    {
        var xmlDoc;

        if (window.ActiveXObject)
        {
            var versions =

[
                "Msxml2.DOMDocument.6.0",
                "Msxml2.DOMDocument.3.0"
            ];

            for (var i = 0; i < versions.length; i++)
            {
                try
                {
                    xmlDoc = new ActiveXObject(versions[i]);
                    return xmlDoc;
                }
                catch (error)
                {
                    //do nothing here
                }
            }
        }
        else if (document.implementation &&
                 document.implementation.createDocument)
        {
            xmlDoc = document.implementation.createDocument("","",null);
            return xmlDoc;
        }

        return null;
    }


    var xmlDocument = createDocument();
    xmlDocument.load("ch12_examp11.xml");

    function displayDogs()
    {
        var dogNodes = xmlDocument.getElementsByTagName("dog");

        var table = document.createElement("table");
        table.setAttribute("cellPadding",5); //Give the table some cell padding.
        table.setAttribute("width", "100%");
        table.setAttribute("border", "1");

        var tableHeader = document.createElement("thead");
        var tableRow = document.createElement("tr");

        for (var i = 0; i < dogNodes[0].childNodes.length; i++)
        {
            var currentNode = dogNodes[0].childNodes[i];

            if (currentNode.nodeType == 1)
            {

                var tableHeaderCell = document.createElement("th");

                var textData = document.createTextNode(currentNode.nodeName);

                tableHeaderCell.appendChild(textData);

tableRow.appendChild(tableHeaderCell);
            }
        }

        tableHeader.appendChild(tableRow);

        table.appendChild(tableHeader);

        var tableBody = document.createElement("tbody");

        for (var i = 0; i < dogNodes.length; i++)
        {
            var tableRow = document.createElement("tr");

            for (var j = 0; j < dogNodes[i].childNodes.length; j++)
            {
                var currentNode = dogNodes[i].childNodes[j];
                if (currentNode.nodeType == 1)
                {
                    var tableDataCell = document.createElement("td");
                    var textData = document.createTextNode
                    (
                        currentNode.firstChild.nodeValue
                    );

                    tableDataCell.appendChild(textData);

                    tableRow.appendChild(tableDataCell);
                }
            }

            tableBody.appendChild(tableRow);
        }

        table.appendChild(tableBody);

        document.body.appendChild(table);
    }
    </script>
</head>
<body>
    <a href="javascript: displayDogs();">Display Dogs</a>
</body>
</html>

Save this as ch12_examp11.htm. Now type the following XML into another file and save it as ch12_examp11.xml.

<?xml version="1.0" encoding="iso-8859-1"?>

<myDogs>
    <dog>
        <name>Morgan</name>
        <breed>Labrador Retriever</breed>

<age>4 years</age>
        <fullBlood>yes</fullBlood>
        <color>chocolate</color>
    </dog>
    <dog>
        <name>Molly</name>
        <breed>Labrador Retriever</breed>
        <age>12 years</age>
        <fullBlood>yes</fullBlood>
        <color>yellow</color>
    </dog>
    <dog>
        <name>Madison</name>
        <breed>Labrador Retriever</breed>
        <age>10 years</age>
        <fullBlood>yes</fullBlood>
        <color>chocolate</color>
    </dog>
</myDogs>

When you open the HTML page in your browser, you'll see a web page with only a link visible. When you click the link, you should see something like what is shown in Figure 12-16.

Figure 12.16. Figure 12-16

The first thing you do is create a DOM object and load an XML document into it.

var xmlDocument = createDocument();

xmlDocument.load("ch12_examp11.xml");

The workhorse of this page is the next function, displayDogs(). Its job is to build a table and populate it with the information from the XML file.

function displayDogs()
{
        var dogNodes = xmlDocument.getElementsByTagName("dog");
        var table = document.createElement("table");
        table.setAttribute("cellPadding",5); //Give the table some cell padding.
        table.setAttribute("width", "100%");
        table.setAttribute("border", "1");

The first thing this function does is use the getElementsByTagName() method to retrieve the <dog/> elements and assign the resulting node list to dogNodes. Next, create a <table/> element by using the document.createElement() method, and set its cellPadding, width, and border attributes using setAttribute().

Next, create the table header and heading cells. For the column headers, use the element names of the <dog/> element's children (name, breed, age, and so on).

var tableHeader = document.createElement("thead");
        var tableRow = document.createElement("tr");

        for (var i = 0; i < dogNodes[0].childNodes.length; i++)
        {
            var currentNode = dogNodes[0].childNodes[i];

            //Loop code here.
        }

        tableHeader.appendChild(tableRow);
        table.appendChild(tableHeader);

The first few lines of this code create <thead/> and <tr/> elements. Then the code loops through the first <dog/> element's child nodes (more on this later). After the loop, append the <tr/> element to the table header and add the header to the table. Now let's look at the loop.

for (var i = 0; i < dogNodes[0].childNodes.length; i++)
        {
            var currentNode = dogNodes[0].childNodes[i];
            if (currentNode.nodeType == 1)
            {
                var tableHeaderCell = document.createElement("th");
                var textData = document.createTextNode(currentNode.nodeName);

                tableHeaderCell.appendChild(textData);
                tableRow.appendChild(tableHeaderCell);
            }
        }

The goal is to use the element names as headers for the column. However, you're looping through every child node of a <dog/> element, so any instance of whitespace between elements is counted as a child node in DOM supported browsers. To solve this problem, check the current node's type with the nodeType property. If it's equal to 1, then the child node is an element. Next, create a <th/> element, and a text node containing the current node's nodeName, which you append to the header cell. And finally, append the <th/> element to the row.

The second part of displayDogs() builds the body of the table and populates it with data. It is similar in look and function to the header-generation code.

var tableBody = document.createElement("tbody");

        for (var i = 0; i < dogNodes.length; i++)
        {
            var tableRow = document.createElement("tr");

            //Inner loop code here

            tableBody.appendChild(tableRow);
        }

        table.appendChild(tableBody);

First, create the <tbody/> element, and then loop through the dogNodes node list, cycling through the <dog/> elements. Inside this loop, create a <tr/> element and append it to the table's body. When the loop exits, append the <tbody/> element to the table. Now look at the inner loop, which adds data cells to the row.

for (var j = 0; j < dogNodes[i].childNodes.length; j++)
            {
                var currentNode = dogNodes[i].childNodes[j];

                if (currentNode.nodeType == 1)
                {
                    var tableDataCell = document.createElement("td");
                    var textData = document.createTextNode(
                        currentNode.firstChild.nodeValue
                    );

                    tableDataCell.appendChild(textData);

                    tableRow.appendChild(tableDataCell);
                }

                tableBody.appendChild(tableRow);
            }

This inner loop cycles through the child elements of <dog/>. First, assign the currentNode variable to reference the current node. This enables you to access this node a little more easily (much less typing!). Next, check the node's type. Again, DOM-based browsers count whitespace as child nodes, so you need to make sure the current node is an element. When it's confirmed that the current node is an element, create a <td/> element and a text node containing the text of currentNode. Append the text node to the data cell, and append the data cell to the table row created in the outer for loop.

At this point, the table is completed, so add it to the HTML page. You do this with the following:

document.body.appendChild(table);
}

Now all you have to do is invoke the displayDogs() function. To do this, place a hyperlink in the page's body to call the function when clicked.

<a href="javascript: displayDogs();">Display Dogs</a>