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
그림 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
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 : 문서의 DOM 부분에 기반한 XML문서 생성
// 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.
그림 2.1 : 문자열 'XML Soup'에서 XML문서 생성
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");
그림 3 : 변환 수행
var fragment = xsltProcessor.transformToFragment(xmlRef, document);