Manipulating Documents: The Document Object Model (DOM)

This chapter is from the book

XML Primer Plus

Learn More Buy

This chapter is from the book

This chapter is from the book 

XML Primer Plus

Learn More Buy

Navigating a DOM Document

At this point we have an application, we've parsed the document, we've looked at node types, and we've obtained an object that represents the activities element. It's time to move on to the next step: displaying information on available activities.

In the real world, of course, you would have any number of options for displaying this information. The ultimate destination might be a browser, or it might be some other client-side application. Because you might be using any of several languages in your environment, we'll keep the functionality simple and just retrieve the information and output it to the default location. What you do with it from there is up to you.

Retrieving Elements by Name

We retrieved the activities element by working our way down the list of children of activitysystem, but there's a better way. DOM enables you to retrieve a list of child elements based on their names, eliminating not only any extraneous elements, but also the whitespace between them.

Listing 3.6 shows the retrieval of all activity children of the activities element and their subsequent passing to the displayActivity() method. The method is just a placeholder for now, but to keep things clean, this is where we'll put the logic to retrieve and display information about an individual activity.

Listing 3.6 Retrieving the Activities

...
   Element root = doc.getDocumentElement();

   Node firstChild = root.getFirstChild();
   Node secondChild = firstChild.getNextSibling();


   Element activitiesElement = (Element)secondChild;
   NodeList activitiesList =
         activitiesElement.getElementsByTagName("activity");
   for (int i=0; i < activitiesList.getLength(); i++) {
     Node thisNode = activitiesList.item(i);
     displayActivity(thisNode);
   }
  }

  public static void displayActivity(Node thisAct) {

   println("Activity node");

  }
}

Notice that because the getElementsByTagName() method is defined as part of the Element interface, we first have to convert the secondChild Node to an Element object. Next, we create a NodeList containing all the activity children of activities, and loop through it, displaying static text for each. As you'll see in a little while, the NodeList keeps the nodes in their original document order.

PHP

PHP doesn't support the NodeList interface. Instead of returning a Nodelist interface, PHP returns an array:

<?php

...

$first_child  = $root->first_child();
$activities_el = $first_child->next_sibling();

$activities_list = $activities_el->get_elements_by_tagname("activity");
$count_activities = count($activities_list);

for ($i = 0; $i < $count_activities; $i++) {
 display_activity($activites_list[$i]);
}
function display_activity (&$act)
{
 echo("Activity mode<br>\n");
}
?>

Perl

Perl supports the NodeList interface, but can also return a native Perl array, if called in list context. The following code shows the native array:

...
my $activities_el = $first_child->getNextSibling();
for my $act ( $activities_el->getElementsByTagName("activity") ) {
  display_activity($act);
}

sub display_activity {
  print "Activity Element\n";
}
...

Here's the standard NodeList:

...
my $activities_el = $first_child->getNextSibling();
my $activities_list = $activities_el->getElementsByTagName("activity");

for ( my $i = 0 ; $i < $activities_list->getLength() ; $i++ ) {
  display_activity( $activities_list->item($i) );
}
...

NamedNodeMaps

DOM also defines an interface called NamedNodeMap, which provides an unordered representation of a group of nodes that are accessible by name. For example, Listing 3.7 shows the activity element's attributes retrieved and stored as a NamedNodeMap.

Listing 3.7 A NamedNodeMap

...
  public static void displayActivity(Node thisAct) {


   NamedNodeMap actAttrs = thisAct.getAttributes();
   println("Activity node: " + actAttrs.getNamedItem("activityid"));

  }
...

The getAttributes() method returns a NamedNodeMap of all the attributes on the element. In this case, of course, there is only one attribute, but that doesn't matter to the map. When we execute this application, notice the result:

Activity node: activityid="A1"
Activity node: activityid="A2"

Why did we get both the name and the value? Because the getNamedItem() method of NamedNodeMap returns a node, not a string value. That node is an Attr node.

Attributes

Attributes seem simple. After all, they're just a name and a value, right? Well, yes, they are just a name and a value, but they're far from simple.

First of all, as mentioned previously, attributes are not considered the children of the elements that carry them, but rather they're viewed as properties of sorts. Because of this, they're not considered part of the DOM tree.

Second, while attribute nodes have text children that contain their values, they also return their values directly through both the getValue() method, which is specific to Attr nodes, as well as the Node interface's getNodeValue() method. More commonly, however, attribute values are retrieved directly from the element, as shown in Listing 3.8.

Listing 3.8 Retrieving Attribute Values

...
  public static void displayActivity(Node thisAct) {

   NamedNodeMap actAttrs = thisAct.getAttributes();
   Node thisActNode = actAttrs.getNamedItem("activityid");
   Attr thisActAttr = (Attr)thisActNode;

   println(thisActAttr.getValue());
   println(thisActAttr.getNodeValue());
   println(thisActAttr.getFirstChild().getNodeValue());

   Element thisActElement = (Element)thisAct;
   thisActAttr = thisActElement.getAttributeNode("activityid");
   println(thisActAttr.getValue());

   println(thisActElement.getAttribute("activityid"));

  }
...

Let's look at what we have here. We're extracting the attribute Node from the NamedNodeMap, then casting it to an Attr so we can access Attr-specific methods such as getValue(). The getNodeValue() method also returns the value, as does retrieving the Text node child and getting that value.

The other option is to work directly from the element. First we convert the activity node to an Element node, then we use getAttributeNode() to retrieve the actual attribute node. Note that at this point, thisActAttr represents the same Attr object it represented in the first section, and can be treated accordingly.

We can also retrieve the value directly from the Element using the getAttribute() method.

Working with Text Nodes

All right, enough preliminaries. We want to display the information on activities, so we're going to need to access the text child nodes of our elements. The code in Listing 3.9 retrieves the main text nodes, as shown in Figure 3.3.

Listing 3.9 Retrieving the Text Nodes

...
  public static void displayActivity(Node thisAct) {

   Element thisActElement = (Element)thisAct;
   String activityCode =
            thisActElement.getAttribute("activityid");

   NodeList nameElements =
           thisActElement.getElementsByTagName("name");
   Node nameElement = nameElements.item(0);
   Node nameText = nameElement.getFirstChild();
   String name = nameText.getNodeValue();

   String description =
        thisActElement.getElementsByTagName("description")
               .item(0).getFirstChild()
               .getNodeValue();

   String date = thisActElement.getElementsByTagName("date")
                  .item(0).getFirstChild()
                  .getNodeValue();

   String type = thisActElement.getElementsByTagName("type")
                  .item(0).getFirstChild()
                  .getNodeValue();

   String limit = thisActElement.getElementsByTagName("limit")
                  .item(0).getFirstChild()
                  .getNodeValue();
   int limitNum = Integer.parseInt(limit);
  }
}

Here we're creating String variables and assigning the values of their corresponding text nodes. Later, we'll output these variables to display the activity information.

Let's look at it step by step as we retrieve the name of the activity. First we're getting all name children of the activity element, and retrieving the first (and only) item in the list from the zero-based array. This is the name element itself. Next, we get the first child of that element, which is the text node. Finally, we retrieve the value of the text node.

We'll do the same for the subsequent values, but we'll use Java's shorthand capabilities.

Figure 3.3 The main activity elements.

Testing for Children

The last item, limit, defines how many participants the activity can have. All current participants are noted as children of the persons element, so we can use getElementsByTagName() to tell us how many people are already signed up. Before we bother getting a count, however, we can use the hasChildNodes() method to determine whether there are any children, as shown in Listing 3.10.

Listing 3.10 Counting Children

...
   String limit = thisActElement.getElementsByTagName("limit")
                  .item(0).getFirstChild()
                  .getNodeValue();
   int limitNum = Integer.parseInt(limit);

   int currentNum = 0;

   Node personsNode = thisActElement
             .getElementsByTagName("persons").item(0);
   Element personsElement = (Element)personsNode;

   if (personsElement.hasChildNodes()) {

     currentNum = personsElement.getElementsByTagName("person")
                            .getLength();

   };

   int spacesLeft = limitNum - currentNum;

  }
}

First we initialize the currentNum variable, then we get a reference to the persons element, just as we did with the previous elements. The difference here is that rather than retrieving the child node value, we're checking for children, then retrieving the number of child nodes (if any).

It's important to note that while there will be situations where performance dictates a structure like this, the check was unnecessary in this case; if there are no children, the length of the NodeList will simply be zero.

Retrieving an Element by ID

Now that we have the information on the activity itself, we want the information about the location. The location information, however, is stored in a separate location element that is only referenced by the locationRef element. To get that information, we want to be able to retrieve the location element directly, preferably by some kind of unique identifier.

The getElementById() method on the Document object will select an element by its unique ID value, but first we have to create that ID. We'll talk more about ID values in Chapter 7, "Document Type Definitions (DTDs)," but for now understand that Listing 3.11 shows the specification of the location element's locationid as a unique identifier.

Listing 3.11 Creating the ID within activities.xml

<?xml version="1.0"?>
<!DOCTYPE activitysystem [
   <!ATTLIST location locationid ID #REQUIRED>
]>
<activitysystem>
  <activities>
...

Now we can reference the ID directly, as in Listing 3.12.

Listing 3.12 Retrieving an Element by ID

...
   int spacesLeft = limitNum - currentNum;


   Node locationRefNode =
       thisActElement.getElementsByTagName("locationRef").item(0);
   Element locationRefElement = (Element)locationRefNode;
   String locationRef = locationRefElement.getAttribute("locationid");

   Document doc = locationRefElement.getOwnerDocument();
   Element locationElement = doc.getElementById(locationRef);

   String locationName = locationElement.getElementsByTagName("name")
                      .item(0).getFirstChild()
                      .getNodeValue();
   String locationDeck = locationElement.getElementsByTagName("deck")
                     .item(0).getFirstChild()
                     .getNodeValue();
  }
}

First, we retrieve the value of the locationid attribute from the locationRef element, just as we retrieved the activityCode attribute earlier.

Next, we have to work around a little problem. Because we declared the doc variable in the main() method, it's not defined within the displayActivity() method. Fortunately, we can get a reference to the Document object itself by calling the getOwnerDocument() method for any of our elements.

Once we get the document, we can call the getElementById() method to get a reference to the location element that matches our locationRef. From there, we can retrieve the information just as we did for all of our other elements.

Finally, now that we have all the information, we can display it, as shown in Listings 3.13 and 3.14.

Listing 3.13 Displaying the Results

...
   String locationDeck = locationElement.getElementsByTagName("deck")
                     .item(0).getFirstChild()
                     .getNodeValue();

   println("Activity:");
   println("("+activityCode+") "+name+" -- "+date);
   println("Type: "+type);
   println(description);
   println("Spaces left: "+spacesLeft);
   println("Location: "+locationName+", Deck "+locationDeck);
   println("\n");
  }
}

Listing 3.14 The Results

Activity:
(A1) Zero-G Volleyball -- 4.30.45
Type: Sports

        Even better than beach volleyball!

Spaces left: 16
Location: Zero-G Sports Arena, Deck 25


Activity:
(A2) Stargazing -- 4.29.45
Type: Educational

        Learn the visible constellations.

Spaces left: 5
Location: Zero-G Sports Arena, Deck 25