JavaScript/XSLT Bindings
JavaScript can run XSLT transformations through the XSLTProcessor
object. Once instantiated, an XSLTProcessor
has an XSLTProcessor.importStylesheet()
method that takes as an argument the XSLT stylesheet to be used in the transformation. The stylesheet has to be passed in as an XML document, which means that the .xsl file has to be loaded by the page before calling XSLTProcessor.importStylesheet()
. This can be done via XMLHttpRequest
or XMLDocument.load()
.
Figure 1 : Instantiating an XSLTProcessor
var xsltProcessor = new XSLTProcessor(); // Load the xsl file using synchronous (third param is set to false) XMLHttpRequest var myXMLHTTPRequest = new XMLHttpRequest(); myXMLHTTPRequest.open("GET", "example.xsl", false); myXMLHTTPRequest.send(null); var xslRef = myXMLHTTPRequest.responseXML; // Finally import the .xsl xsltProcessor.importStylesheet(xslRef);
For the actual transformation, XSLTProcessor
requires an XML document, which is used in conjunction with the imported XSL file to produce the final result. The XML document can be a separate XML file loaded as shown in figure 1, or it can be part of the existing page. To process part of a page's DOM, it is necessary to first create an XML document in memory. Assuming that the DOM to be processed is contained by an element with the id example
, that DOM can be "cloned" using the in-memory XML document's Document.importNode()
method. Document.importNode()
allows transferring a DOM fragment between documents, in this case from an HTML document to an XML document. The first parameter references the DOM node to clone. By making the second parameter "true", it will clone all descendants as well (a deep clone). The cloned DOM can then be easily inserted into the XML document using Node.appendChild()
, as shown in figure 2.
Figure 2 : Creating an XML document based on part of a document's DOM
// create a new XML document in memory var xmlRef = document.implementation.createDocument("", "", null); // we want to move a part of the DOM from an HTML document to an XML document. // importNode is used to clone the nodes we want to process via XSLT - true makes it do a deep clone var myNode = document.getElementById("example"); var clonedNode = xmlRef.importNode(myNode, true); // add the cloned DOM into the XML document xmlRef.appendChild(clonedNode);
Once the stylesheet has been imported, XSLTProcessor
has to perform two methods for the actual transformation, namely XSLTProcessor.transformToDocument()
and XSLTProcessor.transformToFragment()
. XSLTProcessor.transformToDocument()
returns a full XML document while XSLTProcessor.transformToFragment()
returns a document fragment that can be easily added to an existing document. Both take in the XML document as the first parameter that will be transformed. XSLTProcessor.transformToFragment()
requires a second parameter, namely the document object that will own the generated fragment. If the generated fragment will be inserted into the current HTML document, passing in document is enough.
Figure 2.1 : Creating an XML document From a String 'XML Soup'
While you can use IE loadXML
method to load a string containing XML you have to perform some tweaking and tuning to do the same in Mozilla. You must use the DomParser.no to create any document, as this is handled by the DomParser.
var parser = new DOMParser(); var doc = parser.parseFromString(aStr, "text/xml");
Figure 3 : Performing the transformation
var fragment = xsltProcessor.transformToFragment(xmlRef, document);