XML Step by Step- P21 ppsx

Document node Description Example method getElementsByTagName Returns a NodeList AuthorElementCollection = type-name collection of all elements Document.getElementsByTagName"AUTHOR"; in

■ childNodes is a property of the Element node for the root element It

contains a collection of all the nonattribute child nodes of the root Element node In this example, it contains the Element nodes for the five child XML elements: TITLE, AUTHOR, BINDING, PAGES,

and PRICE The expression childNodes(0) references the first of

these child nodes (the one for the TITLE element)

note

In the example page (Listing 11-3), you could use the expression

Document.childNodes(2) to obtain the Element node for the root element

(Document.childNodes(0) is the node for the XML declaration and

Document.childNodes(1) is the node for the comment.) However, an

advan-tage of using the Document node’s documentElement property is that its value

doesn’t depend on the position of the root element within the XML document For example, if you were to remove the comment at the beginning of the docu-ment, or if you were to add a document type declaration,

Document.childNodes(2) would no longer represent the root element

■ text is a property of the Element node returned by childNodes(0) It

provides the complete text content of this node as well as the text belonging to any descendent Element nodes it might have In this

ex-ample, TITLE has no descendent elements, so text contains only TITLE’s own text, The Adventures of Huckleberry Finn.

note

The childNodes and text properties are among the common node properties

given in Table 11-2

Document node Description Example

property

async Assigning false to the Document.async = false;

async property causes

a subsequent call to

the load method (described

later in the table) to load the XML document synchronously (that is, the call won’t return until the document is fully loaded).

The default property value

is true.

doctype The DocumentType DocumentType = Document.doctype;

node representing the document type declaration

documentElement The Element node RootElement = Document.documentElement;

representing the root element of the XML document

parseError An object that contains ErrorCode =

information on the first Document.parseError.errorCode;

well-formedness or validity if (ErrorCode ! = 0) error that the processor /* report and handle error */ encountered when it loaded else

and processed the XML /* document is error-free */

document, or a code indicating that the document is error-free

schemas If you assign an XML XMLSchemaCache = new ActiveXObject

SchemaCache object to ("Msxml2.XML SchemaCache.4.0"); this property, the document XMLSchemaCache.add

will be validated against the (XMLNamespaceName, associated XML schema "Book Schema.xsd");

when the load method Document.schemas = XMLSchemaCache; (described later in the table)

is subsequently called.

document

Document node Description Example

method

getElementsByTagName Returns a NodeList AuthorElementCollection =

(type-name) collection of all elements Document.getElementsByTagName("AUTHOR");

in the document that have the specified type name If you pass "*",

it returns all elements.

nodeFromID (id-value) Returns the node Element =

representing the element Document.nodeFromID (“S021”);

whose ID type attribute has the value that you pass.

(For information on ID attributes, see “Specifying

a Tokenized Type” in Chapter 5.)

Table 11-3 Useful properties and methods provided by Document nodes The available

prop-erties also include the common node propprop-erties listed in Table 11-2.

The TITLE element’s character data that derives from the expression on the

right side of the equal sign (The Adventures of Huckleberry Finn) is assigned to the innerText property of the HTML SPAN element that has the identifier title:

title.innerText=

Document.documentElement.childNodes(0).text;

This SPAN element is defined within the BODY of the HTML page, as follows:

<SPAN ID=”title” STYLE=”font-weight:bold”></SPAN>

Assigning the character data to the SPAN’s innerText property causes the SPAN

to display that text, using the cascading style sheet property setting defined

within its start-tag (font-weight:bold).

tip

In the Dynamic HTML (DHTML) model supported by Internet Explorer, each HTML element has a set of properties that you can use to set or retrieve

various features of the element through script code The innerText property

sets or retrieves the text content of an HTML element For information on working with DHTML as implemented in Internet Explorer, see the topic

“HTML and Dynamic HTML” in the MSDN Library on the Web at

http://msdn.microsoft.com/library/

Using a NodeList Object

As I explained earlier in the chapter, the childNodes node property contains a

collection of the current node’s nonattribute child nodes (As you’ll learn later,

you access attribute child nodes through the node’s attributes property.) The specific type of collection that childNodes contains is known as a NodeList object.

To extract a specific child node from a NodeList object, you can call its item

method, passing it the 0-based index of the child node you want to retrieve For example, the following method call obtains the first child node belonging

to Element:

FirstNode = Element.childNodes.item(0);

However, because item is the default method for a NodeList object, you can

omit it, as you’ve seen in previous examples in this chapter:

FirstNode = Element.childNodes(0);

Table 11-4 lists the property and the methods provided by a NodeList object

length The number of nodes NodeCount =

contained in the collection Element.childNodes.length;

item (0-based-index) Returns the node at the SecondChild =

(default method) position indicated by the Element.childNodes.item (1);

index you pass, where 0 or indicates the first node SecondChild = Element.childNodes (1);

reset () Sets the internal pointer Element.childNodes.reset ();

to the position before the first node in the collection,

so the next call to

nextNode returns the

first node

nextNode () Returns the next node in Element.childNodes.reset ();

the collection, as marked FirstNode =

by the internal pointer Element.childNodes.nextNode ();

Table 11-4 The property and methods provided by a NodeList collection object A NodeList

object is supplied by the childNodes node property.

Retrieving an Element’s Character Data

The script in Listing 11-3 used the text property of each child element (TITLE,

AUTHOR, BINDING, PAGES, and PRICE) as a shortcut for obtaining the

element’s character data For instance, here’s the statement used to retrieve the character data of the TITLE element:

title.innerText=

Document.documentElement.childNodes(0).text;

The text property provides the text content of the element represented by the

current node, plus the text content of any descendent elements It works fine for extracting an element’s character data if the element has no child elements (such

as TITLE) However, if the element contains one or more child elements as well

as character data, as in the following example, the text property returns all the

text (in this example, “Moby-Dick Or, The Whale”)

<TITLE>Moby-Dick <SUBTITLE>Or, The Whale</SUBTITLE></TITLE>

To obtain only the character data of the TITLE element, you need to access its child Text node

Recall from Table 11-1 that an Element node’s nodeValue property is always set

to null If the element contains character data, this text is stored in a child Text node and you can obtain it from the Text node’s nodeValue property For ex-ample, if Element contains the node for the “Moby-Dick” TITLE element

shown in the preceding example, the following expression would supply

TITLE’s character data (Moby-Dick) without including the character data

be-longing to SUBTITLE:

Element.firstChild.nodeValue

(Because TITLE’s character data comes before its subelement, it is represented by

the first child node and you can therefore retrieve it using the firstChild property.)

If an element’s character data is interspersed with child elements, comments, or processing instructions, each separate block of character data is represented by its own child Text node For instance, the following ITEM element would have three child nodes that would occur in this order: a Text node representing the first block of character data, an Element node representing the child element SUB-ITEM, and another Text node representing the second block of character data

character data block 1

<SUB-ITEM>sub-item text</SUB-ITEM>

character data block 2

</ITEM>

Table 11-5 lists a useful property and method provided by Text nodes

length The number of characters CharacterCount = Text.length;

in the node’s text

substringData Returns a string SubString = Text.substringData (2, 3);

(char-offset, num-chars) containing the specified (Returns the third, fourth, and fifth

number of characters characters from the Text element’s from the node’s text content)

content, starting at the specified character offset

Table 11-5 A useful property and method provided by Text nodes The available properties

also include the common node properties listed in Table 11-2.

Displaying a Variable Number of XML Elements

So far, you’ve learned how to display an XML document that has a known num-ber of elements If a document has an unknown numnum-ber of elements, using the DOM to display it is a bit more complex

For example, with an XML document such as Inventory.xml (given in Listing 10-1 and on the companion CD) or Inventory Big.xml (given in Listing 10-3 and

on the companion CD), you generally would not know in advance how many BOOK elements the document contains And if the number of BOOK elements changes, you of course would like your script to keep working

Listing 11-4 presents an HTML page that uses the DOM to display

Inventory.xml in a way that is independent of the number of BOOK elements contained in the document (You’ll find this listing on the companion CD

under the filename DomDemo Variable.htm.) Here’s how the page looks in Internet Explorer:

DomDemo Variable.htm

<! File Name: DomDemo Variable.htm >

<HTML>

<HEAD>

<TITLE>Book Inventory</TITLE>

<SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD">

HTMLCode = "";

Document = dsoInventory.XMLDocument;

for (i=0;

i < Document.documentElement.childNodes.length;

i++)

{

HTMLCode +=

"<SPAN STYLE='font-style:italic'>Title: </SPAN>"

+ Document.documentElement.childNodes(i).childNodes(0).text + "<BR>"

+ "<SPAN STYLE='font-style:italic'>Author: </SPAN>"

+ Document.documentElement.childNodes(i).childNodes(1).text + "<BR>"

+ "<SPAN STYLE='font-style:italic'>Binding: </SPAN>"

+ Document.documentElement.childNodes(i).childNodes(2).text + "<BR>"

+ "<SPAN STYLE='font-style:italic'>Number of pages: "

+ "</SPAN>"

+ Document.documentElement.childNodes(i).childNodes(3).text + "<BR>"

+ "<SPAN STYLE='font-style:italic'>Price: </SPAN>"

+ Document.documentElement.childNodes(i).childNodes(4).text + "<P>";

}

DisplayDIV.innerHTML=HTMLCode;

</SCRIPT>

</HEAD>

<BODY>

<XML ID="dsoInventory" SRC="Inventory.xml"></XML>

<H2>Book Inventory</H2>

<DIV ID="DisplayDIV"></DIV>

</BODY>

</HTML>

Listing 11-4.

The script in the example page uses the length property to determine the number of BOOK elements contained within the root element (The length property is a mem-ber of the NodeList collection object provided by the childNodes property of the root element node See Table 11-4.) The script contains a for loop that is executed

once for each BOOK element and includes the code to display each of these elements:

for (i=0;

i < Document.documentElement.childNodes.length;

i++)

{

/* code to display a BOOK element */

}

Because the number of BOOK elements is unknown, the page can’t use a fixed set of SPAN elements in its BODY to display the data (as did the previous ex-ample page in Listing 11-3) Rather, for each BOOK element, the script dynami-cally generates the entire block of HTML markup necessary to display the

element:

for (i=0;

i < Document.documentElement.childNodes.length;

i++)

{

HTMLCode +=

"<SPAN STYLE='font-style:italic'>Title: </SPAN>"

+ Document.documentElement.childNodes(i).childNodes(0).text

+ "<BR>"

+ "<SPAN STYLE='font-style:italic'>Author: </SPAN>"

+ Document.documentElement.childNodes(i).childNodes(1).text

+ "<BR>"

+ "<SPAN STYLE='font-style:italic'>Binding: </SPAN>"

+ Document.documentElement.childNodes(i).childNodes(2).text

+ "<BR>"

+ "<SPAN STYLE='font-style:italic'>Number of pages: "

+ "</SPAN>"

+ Document.documentElement.childNodes(i).childNodes(3).text

+ "<BR>"

+ "<SPAN STYLE='font-style:italic'>Price: </SPAN>"

+ Document.documentElement.childNodes(i).childNodes(4).text

+ "<P>";

}

The script stores all of these blocks of HTML markup in the variable

HTMLCode After the for loop, when all blocks have been generated and stored

in HTMLCode, the script assigns the HTML markup to the innerHTML

prop-erty of the DIV element in the BODY of the page (this element has the ID

DisplayDIV):

DisplayDIV.innerHTML=HTMLCode;

The DIV element then immediately renders the HTML and displays the results, which you saw in the previous figure

To convince yourself that the page works regardless of the number of BOOK elements the XML document contains, you might edit the data island in this page so that it displays Inventory Big.xml, which contains twice as many BOOK elements as Inventory.xml:

<XML ID=”dsoInventory” SRC=”Inventory Big.xml”></XML>

Using Other Ways to Access Elements

The example scripts you’ve seen so far have accessed Element nodes by

travers-ing the node hierarchy ustravers-ing the childNodes or the firstChild node property to

move from one node to an adjoining node Keep in mind that you can use the

lastChild, previousSibling, nextSibling, and parentNode node properties in

analogous ways Table 11-2 describes all these properties

note

The childNodes, firstChild, and lastChild properties allow you to access only nonattribute child nodes, while the previousSibling and nextSibling properties

let you access any type of sibling node For a Document or Attribute node, the

parentNode property is always set to null.

Another way to access XML elements is to use the getElementsByTagName

property to extract all elements that have a particular type name (such as TITLE) This method is available for a Document node, as described in Table 11-3, as well as for an Element node, as described in Table 11-6 If you call the method for a Document node, it returns a collection of Element nodes for all el-ements in the document that have the specified type name For example, the fol-lowing statement obtains a collection of nodes for all elements in the document that have the name BOOK:

NodeList = Document.getElementsByTagName(“BOOK”);

If you call getElementsByTagName for an Element node, as shown in the

fol-lowing example, it returns a collection of nodes for all matching elements that are descendents of the Element node:

NodeList = Element.getElementsByTagName(“AUTHOR”);