Retrieving Information from the DOM

In earlier examples in this chapter, you created elements and set values for attributes belonging to newly created elements. You can also access information already contained in the DOM and use it for additional purposes.

The DocumentType Interface’s Properties

If you want to retrieve the information contained in the DOCTYPE declaration, you can access and process the properties of the DocumentType object. Listing 17.3 shows an example.

Listing 17.3. DoctypeProps.svg: Retrieving and Displaying the DocumentType Object’s Properties

<?xml version='1.0'?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg:svg 
 xmlns:svg="http://www.w3.org/2000/svg" 
 onload="Initialize(evt)"> 
<svg:script type="text/javascript" > 
<![CDATA[ 
var SVGDoc; 
var SVGRoot; 
var SVGDoctype; 
function Initialize(){ 
SVGDoc = evt.getTarget().getOwnerDocument(); 
SVGRoot = SVGDoc.getDocumentElement(); 
SVGDoctype = SVGDoc.doctype; 
getDoctype(evt); 
} 

function getDoctype(){ 
var docElem = SVGDoctype.name; 
var firstString = "The document element is: " + docElem; 
var firstText = SVGDoc.getElementById("docelem"); 
var stars = firstText.firstChild; 
stars.replaceData(0,5, firstString);  

var docPubID = SVGDoctype.publicId; 
var secondString = "The public identifier is: " + docPubID; 
var secondText = SVGDoc.getElementById("pub"); 
var stars2 = secondText.firstChild; 
stars2.replaceData(0,5, secondString); 

var docSystID = SVGDoctype.systemId; 
var thirdString = "The system identifier is: " + docSystID; 
var thirdText = SVGDoc.getElementById("syst"); 
var stars3 = thirdText.firstChild; 
stars3.replaceData(0,5, thirdString); 
} 
]]> 
</svg:script> 
<text id="docelem" x="20" y="40"> 
*** 
</text> 
<text id="pub" x="20" y="100"> 
*** 
</text> 
<text id="syst" x="20" y="160"> 
*** 
</text> 
</svg:svg> 

In the Initialize() function, the SVGDoctype variable is assigned the value of the doctype property of the SVGDoc variable. So, the SVGDoctype variable is a DocumentType object. Therefore, you can retrieve the values of various properties of the DocumentType object.

When you call the getDoctype() function, you retrieve each of three properties of the DocumentType object. You use the value that they contain to replace the data in a Text object (which extends a CharacterData object) that is a child node of each of three SVG text elements. Let’s look in detail at the first of these.

This code declares a variable named docElem and assigns to it the value of the name property of the SVGDoctype variable (which itself contains the value of the doctype property of the Document object):

var docElem = SVGDoctype.name; 

This assigns the element type name of the document element to the docElem variable.

Then you declare a variable firstString and create a message for display that incorporates the value of the docElem variable:

var firstString = "The document element is: " + docElem; 

Then you use the getElementById() method of the Document object to uniquely retrieve the Element node corresponding to the SVG text element with an id attribute of the value docelem.

var firstText = SVGDoc.getElementById("docelem"); 

Next declare a stars variable and assign it the value of the firstChild property (a property of the Element interface) of the firstText variable (the first SVG text element, identified by its id attribute):

var stars = firstText.firstChild; 

Finally, you use the replaceData() method of the CharacterData interface to replace the three stars, which is the original content of the text element.

stars.replaceData(0,5, firstString); 

A similar process is carried out for each of the other two text elements. When the document loads, the script instantly replaces the asterisks with three messages that display the values of the name, publicId, and systemId properties of the DocumentType interface. Figure 17.3 shows the onscreen appearance.

Displaying a List of Child Nodes

In this example, you will retrieve information about the NodeList object. This object contains information about the child nodes of the node that represents the svg element in Listing 17.4.

Listing 17.4. ChildNodes.svg: Retrieving Information About Child Nodes

<?xml version='1.0'?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg 
 xmlns:svg="http://www.w3.org/2000/svg" 
 onload="Initialize(evt)"> 
<script type="text/javascript" > 
<![CDATA[ 
var SVGDoc; 
var SVGRoot; 
var SVGDoctype; 
function Initialize(){ 
SVGDoc = evt.getTarget().getOwnerDocument(); 
SVGRoot = SVGDoc.getDocumentElement(); 
SVGDoctype = SVGDoc.doctype; 
getChildNodes(evt); 
} 

function getChildNodes(){  
var Length = SVGRoot.childNodes.length; 
alert("The <svg> element has " + Length + " child nodes."); 

for (i=0; i<Length; i++){ 
if (SVGRoot.childNodes.item(i).nodeType==1){ 
alert("At position " + i + " in the NodeList object 
  is a <" + SVGRoot.childNodes.item(i).tagName + "> 
  element."); 
} // end if 

} // end for loop 
} // end getChildNodes() function 
]]> 
</script> 
<text id="first" x="20" y="40"> 
This is the first &lt;text&gt; element. 
</text> 
<text id="second" x="20" y="100"> 
This is the second &lt;text&gt; element. 
</text> 
<text id="third" x="20" y="160"> 
This is the third &lt;text&gt; element. 
</text> 
<rect x="20" y="200" width="200" height="50" 
  style="stroke:red; stroke-width:4; fill:none;" /> 
</svg> 

Before considering the explanation of how the code works, first look at the output of the code onscreen. Figures 17.4 and 17.5 show two of the alert boxes produced by the code. First, you might be surprised by the first alert box shown in Figure 17.4. Why does it say that there are 11 child nodes? If you look carefully at the code, you will see that each element starts on a new line. So, there is a Text node consisting only of whitespace separating each element.

Now look at how the code works. Inside the getChildNodes() function, you declare the Length variable. To the Length variable you assign the length property of the NodeList object that contains information about the child nodes of the document element.

var Length = SVGRoot.childNodes.length; 

Next, you use the JavaScript alert() function to output the value of the Length variable:

alert("The <svg> element has " + Length + " child nodes."); 

Then you use a for loop to iterate through the child nodes. The if statement tests whether the value of the nodeType property retrieved by the item() method of the NodeList object equals 1. When the value of the nodeType property is 1, you know that it is an Element node. If the node isn’t an Element node (because it is whitespace), you do nothing. But when the value of the nodeType property indicates that the node is an Element node, you output the position of the node and its element type name using the tagName property of the Element interface.

for (i=0; i<Length; i++){ 
if (SVGRoot.childNodes.item(i).nodeType==1){ 
alert("At position " + i + " in the NodeList object is a <" + 
  SVGRoot.childNodes.item(i).tagName + "> element."); 
} // end if 

} // end for loop 
} // end getChildNodes() function