DOM with JavaScript
To introduce document manipulation with the XML Document Object Model, we begin with a simple scripting example that uses JavaScript and Microsoft's msxml parser. This example takes an XML document (Fig. 8.2) that marks up an article and uses the DOM API to display the document's element names and values. Figure 8.3 lists the JavaScript code that manipulates this XML document and displays its content in an HTML page. Line 15
<script type = "text/javascript" language = "JavaScript">
Parser
JAXP XML4J Xerces msxml
4DOM XML::DOM
Description
Sun Microsystem's Java API for XML Parsing (JAXP) is available at no charge from java.sun.com/xml.
IBM's XML Parser for Java (XML4J) is available at no charge from www.alphaworks.ibm.com/tech/xml4j. Apache's Xerces Java Parser is available at no charge from xml.apache.org/xerces.
Microsoft's XML parser (msxml) version 2.0 is built-into Internet Explorer 5.5. Version 3.0 is also available at no charge from msdn.microsoft.com/xml.
4DOM is a parser for the Python programming language and is available at no charge from fourthought.com/4Suite/4DOM.
XML::DOM is a Perl module that we use in Chapter 17 to manipulate XML documents using Perl. For additional information, visit www-4.ibm.com/software/developer/library/xml-perl2.
Chapter 8
6 <article>
8 <title>Simple XML</title>
10 <date>December 6, 2000</date>
12 <author>
14 <lname>Nieto</lname>
17 <summary>XML is pretty easy.</summary>
19 <content>Once you have mastered HTML, XML is easily
20 learned. You must remember that XML is not for
21 displaying information but for managing information.
Fig. 8.2 Article marked up with XML tags.
is the opening script tag, which allows the document author to include scripting code. Attribute type indicates that the script element is of media type text/javascript. JavaScript is the most popular client-side (e.g., browser) scripting language used in industry. If the browser does not support JavaScript, script's contents are treated as text. Attribute language indicates to the browser that the script is written in the JavaScript scripting language.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
10 <title>A DOM Example</title>
15 <script type = "text/javascript" language = "JavaScript">
196 Document Object Model (DOM™)
17 var xmlDocument = new ActiveXObject( "Microsoft.XMLDOM" );
19 xmlDocument.load( "article.xml" );
21 // get the root element
22 var element = xmlDocument.documentElement;
24 document.writeln(
25 "<p>Here is the root node of the document:" );
26 document.writeln( "<strong>" + element.nodeName
29 document.writeln(
30 "<br>The following are its child elements:" );
31 document.writeln( "</p><ul>" );
33 // traverse all child nodes of root element
34 for ( i = 0; i < element.childNodes.length; i++ ) {
35 var curNode = element.childNodes.item( i );
37 // print node name of each child element
38 document.writeln( "<li><strong>" + curNode.nodeName
44 // get the first child node of root element
45 var currentNode = element.firstChild;
47 document.writeln( "<p>The first child of root node is:" );
48 document.writeln( "<strong>" + currentNode.nodeName
50 document.writeln( "<br>whose next sibling is:" );
52 // get the next sibling of first child
53 var nextSib = currentNode.nextSibling;
55 document.writeln( "<strong>" + nextSib.nodeName
57 document.writeln( "<br>Value of <strong>" + nextSib.nodeName
60 var value = nextSib.firstChild;
62 // print the text value of the sibling
63 document.writeln( "<em>" + value.nodeValue + "</em>" );
64 document.writeln( "<br>Parent node of " );
65 document.writeln( "<strong>" + nextSib.nodeName
67 document.writeln( "<strong>" + nextSib.parentNode.nodeName
Chapter 8
Fig. 8.3 Traversing article, xml with JavaScript (part 3 of 3). Line 17
var xmlDocument = new ActiveXObject( "Microsoft.XMLDOM" );
instantiates a Microsoft XML Document Object Model object and assigns it to reference xmlDocument. This object represents an XML document (in memory) and provides methods for manipulating its data. The statement simply creates the object, which does not yet refer to any specific XML document. Line 19
xmlDocument.load( "article.xml" );
calls method load to load article.xml (Fig. 8.2) into memory. This XML document is parsed by msxml and stored in memory as a tree structure. Line 22
var element = xmlDocument.documentElement;
assigns the root element (i.e., article) to variable element. Property document-Element corresponds to the document's root element. The root element is important because it is used as a reference point for retrieving child elements, text, etc. Lines 26 and 27
document.writeln( "<strong>" + element.nodeName + "</strong>" );
place the name of the root element in a strong element and write it to the browser where it is rendered. Property nodeName corresponds to the name of an attribute, element, etc.—
198 Document Object Model (DOM™)
which are collectively called nodes. In this particular case, element refers to the root node named article. Line 34
for ( i = 0; i < element.childNodes.length; i++ ) {
uses a for loop to iterate through the root node's child nodes (accessed using property childNodes). Property length is used to get the number of child nodes of the document element.
Individual child nodes are accessed using the item method. Each node is given an integer index (starting at zero) based on the order in which they occur in the XML document. For example in Fig. 8.2, title is given the index 0, date is given the index 1, etc. Line 35
var curNode = element.childNodes.item( i );
calls method item to return the child node identified by the index i. This node is assigned to variable curNode. Line 45
var currentNode = element.firstChild;
retrieves the root node's first child node (i.e., title) using property firstChild. This expression is a more concise alternative to var currentNode = element.childNodes.item( 0 );
Nodes at the same level in a document (i.e., that have the same parent node) are called siblings. For example, title, date, author, summary and content are all sibling nodes. Property nextSibling returns a node's next sibling. Line 60
var nextSib = currentNode.nextSibling;
assigns currentNode's (i.e., title from line 45) next sibling (i.e., date) to nextSib.
In addition to elements and attributes, text (e.g., Simple XML in line 8 of Fig. 8.2) is also a node. Line 60
var value = nextSib.firstChild;
assigns nextSib's (i.e., date) first child node to value. In this case, the first child node is a text node. On line 63 the nodeValue method retrieves the value of this text node. The value of a text node's value is the text it contains. Element nodes have a value of null (i.e., the absence of a value). Lines 67 and 68
document.writeln( "<strong>" + nextSib.parentNode.nodeName + "</strong>.</p>" );
retrieve and display nextSib's (i.e., date) parent node (i.e., article). Property parentNode returns a node's parent node.
Chapter 8
Post a comment