Accessing XML Attribute Values
The event.xml document’s <person> elements contain an attendance attribute, which is set to present or absent:
<?xml version="1.0"?> <events> . . . <people> <person attendance="present"> <first_name>June</first_name> <last_name>Allyson</last_name> </person> <person attendance="absent"> <first_name>Virginia</first_name> <last_name>Mayo</last_name> </person> <person attendance="present"> <first_name>Jimmy</first_name> <last_name>Stewart</last_name> </person> </people> </event> </events>
How can you recover the value of, for example, the third guest’s attendance? Take a look at the attributes.html application, which you can see in Figure 9.8. To determine whether the third guest was present, all you have to do is click the button, as you see in the figure, where Jimmy Stewart is listed as being present.
Figure 9.8: Accessing the third guest’s attendance attribute
This application starts by connecting its button to a getData function:
<body> <h1>Accessing XML attributes</h1> <form> <input type = "button" value = "Get the third guest's attendance" onclick = "getData()"> </form> <div width =100 height=100> Was the third guest present? </div> </body>
In getData, the code creates an XMLHttpRequest object and sets the mozillaFlag variable in case you need to remove white space. Then you can read in the XML, remove white space if needed, and pass the XML data to another function, displayThirdGuest:
<html> <head> <title>Accessing XML attributes</title> <script language = "javascript"> function getData() { var mozillaFlag = false; var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); mozillaFlag = true; } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } if(XMLHttpRequestObject) { XMLHttpRequestObject.open("GET", "event.xml", true); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { var xmlDocument = XMLHttpRequestObject.responseXML; if(mozillaFlag){ removeWhitespace(xmlDocument); } displayThirdGuest(xmlDocument); } } XMLHttpRequestObject.send(null); } } In the displayThirdGuest function, you access the third guest’s <first_name> and <last_name> nodes this way:
function displayThirdGuest (xmldoc) { var eventsNode, eventNode, peopleNode; var firstNameNode, lastNameNode, displayText; eventsNode = xmldoc.documentElement; eventNode = eventsNode.firstChild; peopleNode = eventNode.lastChild; personNode = peopleNode.lastChild; firstNameNode = personNode.firstChild; lastNameNode = firstNameNode.nextSibling; . . . } In addition, you want the value of the third guest’s attendance attribute, which is an attribute of the <person> element. You can get a NamedNodeList object holding the attendance attribute with the personNode object’s attributes property:
function displayThirdGuest (xmldoc) { var eventsNode, eventNode, peopleNode; var firstNameNode, lastNameNode, displayText; eventsNode = xmldoc.documentElement; eventNode = eventsNode.firstChild; peopleNode = eventNode.lastChild; personNode = peopleNode.lastChild; firstNameNode = personNode.firstChild; lastNameNode = firstNameNode.nextSibling; attributes = personNode.attributes . . . } To recover the value of the attendance attribute, you can use the NamedNodeList getNamedItem method like this:
function displayThirdGuest (xmldoc) { var eventsNode, eventNode, peopleNode; var firstNameNode, lastNameNode, displayText; eventsNode = xmldoc.documentElement; eventNode = eventsNode.firstChild; peopleNode = eventNode.lastChild; personNode = peopleNode.lastChild; firstNameNode = personNode.firstChild; lastNameNode = firstNameNode.nextSibling; attributes = personNode.attributes attendancePerson = attributes.getNamedItem("attendance"); . . . } Now all you have to do is display the value of the attendance attribute:
function displayThirdGuest (xmldoc) { var eventsNode, eventNode, peopleNode; var firstNameNode, lastNameNode, displayText; eventsNode = xmldoc.documentElement; eventNode = eventsNode.firstChild; peopleNode = eventNode.lastChild; personNode = peopleNode.lastChild; firstNameNode = personNode.firstChild; lastNameNode = firstNameNode.nextSibling; attributes = personNode.attributes attendancePerson = attributes.getNamedItem("attendance"); var displayText = firstNameNode.firstChild.nodeValue + ' ' + lastNameNode.firstChild.nodeValue + " was " + attendancePerson.nodeValue; var target = document.getElementById("targetDiv"); target.innerHTML=displayText; } Now you can retrieve the values of attributes from XML data.
