Using XML Data Islands | Inside JavaScript

As of version 5 in the Internet Explorer, you also can use XML data islands to actually embed XML inside HTML pages. The Internet Explorer supports an HTML <XML> element (which is not part of the HTML standard) that you can just enclose an XML document inside, like this:

 <XML ID="message1">      <DOCUMENT>          <MESSAGE>Hello XML!</MESSAGE>      </DOCUMENT>  </XML>

The Internet Explorer <XML> element has some attributes worth noting:

ID . The ID you can use to refer to the <XML> element in code. Set to an alphanumeric string.
NS . The URI of the XML namespace used by the XML content. Set to an URL.
SRC . Source for the XML document, if that XML document is external. Set to an URL.

When you use this element, you access it using its ID value in code. To reach the element, for example, you can use the all collection, passing it the ID you gave the element like this for the preceding example: document.all("message") . To get the document object corresponding to the XML document, you can then use the XMLDocument property. Here's how I convert the previous example to use a data island instead of the Microsoft.XMLDOM object:

(Listing 22-03.html on the web site)

 <HTML>      <HEAD>           <TITLE>               Getting XML Elements Using XML Data Islands           </TITLE>  <XML ID="xml1" SRC="22-01.xml"></XML>  <SCRIPT LANGUAGE="JavaScript">               <!--              function reader()               {                    var document1, eventsNode, eventNode, peopleNode                    var firstNameNode, lastNameNode, displayText  document1= document.all("xml1").XMLDocument  eventsNode = document1.documentElement                    eventNode = eventsNode.firstChild                    peopleNode = eventNode.lastChild                    personNode = peopleNode.lastChild                    firstNameNode = personNode.firstChild                    lastNameNode = firstNameNode.nextSibling                    displayText = "The main guest was: " +                          firstNameNode.firstChild.nodeValue + ' '                        + lastNameNode.firstChild.nodeValue                    div1.innerHTML=displayText               }               //-->           </SCRIPT>      </HEAD>      <BODY>          <CENTER>              <H1>                  Getting XML Elements Using XML Data Islands              </H1>          <INPUT TYPE="BUTTON" VALUE="Get the name of the main guest"              ONCLICK="reader()">              <P>              <DIV ID="div1"></DIV>          </CENTER>      </BODY>  </HTML>

This example works as the previous example did (Listing 22-02.html).

Here's something else to know. In this example, I used an external XML document, 22-01.xml, which I accessed with the <XML> element's SRC attribute; but you also can enclose the entire XML document in the <XML> element like this:

(Listing 22-04.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Creating An XML Data Island          </TITLE>  <XML ID="xml1">   <?xml version="1.0"?>   <EVENTS>   <EVENT TYPE="informal">   <EVENT_TITLE>15th Award Ceremony</EVENT_TITLE>   <EVENT_NUMBER>1207</EVENT_NUMBER>   <SUBJECT>Gala Event</SUBJECT>   <DATE>7/4/2003</DATE>   <PEOPLE>   <PERSON ATTENDENCE="present">   <FIRST_NAME>Sam</FIRST_NAME>   <LAST_NAME>Edwards</LAST_NAME>   </PERSON>   <PERSON ATTENDENCE="absent">   <FIRST_NAME>Sally</FIRST_NAME>   <LAST_NAME>Jackson</LAST_NAME>   </PERSON>   <PERSON ATTENDENCE="present">   <FIRST_NAME>Cary</FIRST_NAME>   <LAST_NAME>Grant</LAST_NAME>   </PERSON>   </PEOPLE>   </EVENT>   </EVENTS>   </XML>  <SCRIPT LANGUAGE="JavaScript">             <!--            function reader()             {                  var document1, eventsNode, eventNode, peopleNode                  var firstNameNode, lastNameNode, displayText                  document1= document.all("xml1").XMLDocument                  eventsNode = document1.documentElement                  eventNode = eventsNode.firstChild                    peopleNode = eventNode.lastChild                    personNode = peopleNode.lastChild                    firstNameNode = personNode.firstChild                    lastNameNode = firstNameNode.nextSibling                    displayText = "The main guest was: " +                          firstNameNode.firstChild.nodeValue + ' '                        + lastNameNode.firstChild.nodeValue                    div1.innerHTML=displayText               }               //-->           </SCRIPT>      </HEAD>      <BODY>          <CENTER>              <H1>                  Getting XML Elements Using XML Data Islands              </H1>          <INPUT TYPE="BUTTON" VALUE="Get the name of the main guest"              ONCLICK="reader()">              <P>              <DIV ID="div1"></DIV>          </CENTER>      </BODY>  </HTML>

So far, I've used the XMLDocument property of the object corresponding to the XML data island to get the document object, but you also can use the documentElement property of the data island directly to get the root element of the XML document, like this:

 <HTML>      <HEAD>          <TITLE>              Reading XML Data Values          </TITLE>          <XML ID="xml1" SRC="22-01.xml"></XML>          <SCRIPT LANGUAGE="JavaScript">               <!--              function reader()               {                   var document1, eventsNode, eventNode, peopleNode                   var firstNameNode, lastNameNode, displayText  eventsNode = xml1.documentElement  eventNode = eventsNode.firstChild                    peopleNode = eventNode.lastChild                   personNode = peopleNode.lastChild                   firstNameNode = personNode.firstChild                   lastNameNode = firstNameNode.nextSibling                   .                   .                   .  </HTML>