Browsing XML Using XSLT Style Sheets

XSLT style sheets used for browsing XML files have stricter requirements than those used for general transformation. For more information about authoring an XSLT style sheet, see Getting Started with XSLT. 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 XPath Expressions.
  • The XSLT style sheet must come from the same URL scheme (example: http) and host name (example: www.microsoft.com) as the XML source. The 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 a 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 XSLT Documents from Script

The HTML that results from browsing XML with an XSLT 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 XSLT documents:

• The document.XMLDocument property returns the root node of the XML source document.
• The document.XSLDocument property returns the root node of the XSLT 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 you can use to wire up the specific updates you need.

Consider the following example, which shows how the menu is dynamically sorted in the Review Sample (XSLT). 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 XSLT 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 "xsl:sort select" attributes in the style sheet.
  var s = document.XSLDocument.selectNodes(
  "*/xsl:template[@match='menu']//xsl:apply-templates/xsl:sort/@select");
  
  // 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 at XSL Developer's Guide Samples. See the XSLT versions of the same sample at XSLT Developer's Guide Samples.