XSLTProcessor object. Once instantiated, a
XSLTProcessor has an
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
importStylesheet. This can be done via
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 and 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
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
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
transformToDocument() returns a full XML document while
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.
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 3 : Performing the transformation
var fragment = xsltProcessor.transformToFragment(xmlRef, document);