Browsing XML Using XSL Style Sheets

XSL style sheets used for browsing of XML files have stricter requirements than those used for general transformation. For more information about authoring an XSL style sheet, see Getting Started with XSL. When authoring a style sheet for use in direct browsing, keep the following limitations in mind:

The style sheet must target HTML as its output.
The style sheet applies to the root of the source document. Style sheets written to process against the document element instead will generally not display correctly. 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.
The XSL style sheet must come from the same URL scheme (example: http) and host name (example: www.microsoft.com) as the XML source. The XSL style sheet download follows the same security policies as those for fetching an external entity. Attempting to read a style sheet from a different domain results in an access violation error unless the security option "Access data across domains" is selected from the Internet Options dialog box.

Microsoft® Internet Explorer 5 uses an XSL style sheet to display an XML document when that document contains a style sheet processing instruction (PI) with type "text/xsl".

<?xml-stylesheet type="text/xsl" href="review.xsl" ?>

Accessing the XML and XSL Documents from Script

The HTML that results from browsing XML with an XSL style sheet is fully scriptable using the Introduction to the Dynamic HTML Object Model. In addition, there are two properties available on the DHTML document object that provide script access to the XML and XSL documents:

The document.XMLDocument property returns the root node of the XML source document.
The document.XSLDocument property returns the root node of the XSL style sheet document.

Modifications to these two documents via the DOM do not automatically cause updates to the resulting HTML tree, but rather offer a hook that scripters can use to wire up the specific updates they need.

Consider the following example, which shows how the menu is dynamically sorted in the Review Sample (XSL). First, add the links that trigger sorting to the style sheet.

<P class="tagline">
  <A href="javascript:sort('price')">Sort menu by price</A>
  <A href="javascript:sort('description')">Sort menu by description</A>
</P>

Next, write the "sort" function to apply the sort to the menu data and update the display. The script accesses the DOM for the XSL style sheet with the XSLDocument property and uses DOM calls to change attributes representing sort keys.

The XMLDocument is used to locate the XML source fragment that will be used in the update. Calling transformNode on the fragment will result in a string of HTML that can be pasted back into the HTML document.

function sort(key) {
  // Find the "order-by" attributes in the style sheet.
  var s = document.XSLDocument.selectNodes("*/xsl:template[@match='menu']
                                            //xsl:apply-templates/@order-by");
  
  // Replace the values with the new sort key.
  for (var i = s.nextNode(); i != null; i = s.nextNode())
  {
    i.value = key;
  }
  
  // Find the subset of the document we need to update.
  var d = document.XMLDocument.selectSingleNode("story/menu");
  
  // Apply the style sheet to the subset, and update the display.
  menu.innerHTML = d.transformNode(document.XSLDocument);
}

In this example, the style sheet is modified to generate a different view of the XML. The same mechanisms can be used to change the XML source data and to generate updated views of this data.

Try it! The above code is part of the Review Sample (XSL).

Download this sample.