Using XSLT with the DOM from an HTML Page

The qsalesregion.html file (below) uses XSLT with the DOM, from a script in an HTML page. The most important part of the example code is the Jscript function, transformIt(). This function loads a source document, region.xml, and a style sheet, region.xsl, into two DOM instances. The XML document is loaded into objSrcTree, and the XSLT document is loaded into objXSLT. To ensure that MSXML 5.0 is used in this application, the code specifies the version dependent ProgID, MSXML2.DOMDocument.5.0. The XSLT transformation occurs when the objSrcTree.transformNode(objXSLT) method is invoked. The result document is displayed within a <DIV id="transformedXML"> HTML tag.

The transformIt() function is called when the HTML page is first loaded as specified by the <BODY onload="transformIt()"> HTML tag.

The three files used in this example — qsalesregion.html, region.xml, and region.xsl — are listed below.

Example

HTML File (qsalesregion.html)

<HTML>
<HEAD>
<TITLE>Quarterly Sales, by Region</TITLE>
<SCRIPT language='JScript'>
<!--
function transformIt() {
    // Associate the result tree object with any element(s) whose
    // id attribute is "transformedXML."
    var objResTree = document.all['transformedXML'];
    // Declare two new MSXML DOMDocument objects.
    var objSrcTree = new ActiveXObject('MSXML2.DOMDocument.5.0');
    var objXSLT = new ActiveXObject('MSXML2.DOMDocument.5.0');
    // Load the two DOMDocuments with the XML document and the
    // XSLT style sheet.
    objSrcTree.load('region.xml');
    objXSLT.load('region.xsl');
    // Use the transformNode method to apply the XSLT to the XML.
    strResult = objSrcTree.transformNode(objXSLT);
    // Assign the resulting string to the result tree object's
    // innerHTML property.
    objResTree.innerHTML = strResult;
    return true;
    }
-->
</SCRIPT>
<BODY onload='transformIt()'>
<DIV id='transformedXML'></DIV>
</BODY>
</HTML>

XML File (region.xml)

Note that this document contains no <?xml-stylesheet?> processing instruction.

<?xml version="1.0" ?>
<region year="1999">
<name>Western Region</name>
<quarter number="1" books_sold="24000"/>
<quarter number="2" books_sold="38600"/>
</region>

XSLT File (region.xsl)

<xsl:stylesheet version="1.0"
     xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

   <!-- Template rule for region element(s): -->
   <xsl:template match="region">
      <H1><xsl:value-of select="@year"/> Results:</H1>
      <xsl:apply-templates/>
   </xsl:template>

   <!-- Template rule for name element(s): -->
   <xsl:template match="name">
          <!-- Instantiate a level-2 heading -->
      <H2><xsl:value-of select="."/></H2>
      <!-- Instantiate a table with heading cells. -->
      <TABLE>
         <TR>
            <TH align="left">Quarter</TH>
            <TH align="right">Qty</TH>
         </TR>
         <!-- For each <quarter> sibling of the <name> element,
              instantiate a table row and two cells. Data in the cells
              will be the values of the <quarter> element's number and
              books_sold attributes. -->
         <xsl:for-each select="../quarter">
            <TR>
               <TD align="left"><xsl:value-of select="@number"/></TD>
               <TD align="right"><xsl:value-of select="@books_sold"/></TD>
            </TR>
         </xsl:for-each>
      </TABLE>
   </xsl:template>

</xsl:stylesheet>

Formatted Output

HTML Output File with Result Tree from the DOM

After the transformation, Internet Explorer would display the document with the contents of region.xml, as if its HTML code were as follows. Generated HTML is in bold.

<HTML>
<HEAD>
<TITLE>Quarterly Sales, by Region</TITLE>
<BODY>
<DIV>
<H1>1999 Results</H1>
<H2>Western Region</H2>
<TABLE>
<TR>
    <TH align="left">Quarter</TH>
    <TH align="right">Qty</TH>
</TR>
<TR>
    <TD align="left">1</TD>
    <TD align="right">24000</TD>
</TR>
<TR>
    <TD align="left">2</TD>
    <TD align="right">38600</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>

Using XSLT with the DOM from an HTML Page

Example

See Also