Transforming the Contents of XML Data Islands Using XSL

Data islands provide a convenient way to access XML data from an HTML page. Since XSL is an XML grammar itself, data islands also provide a convenient way to load style sheets. The following example uses two data islands to load both the source XML data and the XSL style sheet. The transformNode method is used on these two data islands to generate HTML that can then be inserted into the page.

<HTML>
  <HEAD>
    <TITLE>Simple demo of Microsoft XSL Processor</TITLE>
  </HEAD>

  <XML id="source" src="simple.xml"></XML>
  <XML id="style" src="simple.xsl"></XML>
  
  <SCRIPT FOR="window" EVENT="onload">
    xslTarget.innerHTML = source.transformNode(style.XMLDocument);
  </SCRIPT>

  <BODY>
    <P STYLE="font-size:10pt; font-family:Verdana; color:gray">
      <B>This demo shows the use of data islands for loading XML source and 
      XSL style sheets and inserting the transformed result into the Web page.</B>
    </P>
    <DIV id="xslTarget"></DIV>
  </BODY>
</HTML>

When the above page is completely loaded, including the data islands, the onload event fires and the transformNode method is executed upon the XML source data. transformNode takes a single parameter, which is a DOM node representing an XSL style sheet. The result of this call is XML text. Since the simple.xsl style sheet used in this example generates well-formed HTML, you can feed this into the xslTarget DIV element for display using the innerHTML property.

Note that the XMLDocument property is used on the "style" data island. Without this property, the ID of a data island (for example, "style") is treated as identifying an HTML element, in this case the <XML> element. XMLDocument can be used to explicitly obtain the XML DOM Document node from the <XML> element. Writing style.XMLDocument makes it clear that you are operating on the contents of the data island and not the <XML> element representing the data island.

So why don't you need to also write source.XMLDocument.transformNode(style.XMLDocument)? There is a little helpful magic going on here. If a method from the XML DOM is applied to the data island element, the script engine interface reasons that you wish this method applied to the XML DOM Document node instead, and thus the XMLDocument property can be omitted if another DOM property or method is being applied. In the case of the "source" data island, you are calling a DOM method (transformNode), thus the XMLDocument property is not required.

You could also write source.XMLDocument.transformNode(style.documentElement) and apply the style sheet to the document element instead of the root, but the style sheet would need to reflect this—for example, the document element would need to be handled by a rule other than the root template xsl:template match="/", which will not be invoked unless the style sheet is executed against the document root. It is recommended that you process your style sheets off the document root so they will also work for direct browsing of XML. Some notes on the difference between the document root and the document element can be found at How the DOM Defines the Context for XSL Pattern Queries.

Try it! The example above is part of the Breakfast Menu Demo (Data Islands).

Download this sample.

For more information, see the following related topics: