XSLTProcessor: transformToDocument() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The transformToDocument() method of the XSLTProcessor interface transforms the provided Node source to a Document using the XSLT stylesheet associated with XSLTProcessor.

Syntax

js
transformToDocument(source)

Parameters

source

The Node source to apply the XSLT stylesheet to.

Return value

A Document. The actual interface depends on the output method of the stylesheet, as specified by <xsl:output> element's method.

Output method Result interface
html HTMLDocument
xml XMLDocument
text XMLDocument with a single root element <transformiix:result> with the text as a child

Examples

Using transformToDocument()

This example demonstrates how to use transformToDocument() to transform an XML document using XSLT, resulting in a new XML document structure.

HTML

html
<pre id="result"></pre>

JavaScript

js
const xmlString = `
<books>
  <book>
    <title>Book 1</title>
    <author>Author 1</author>
  </book>
  <book>
    <title>Book 2</title>
    <author>Author 2</author>
  </book>
</books>
`;

const xsltString = `
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml" indent="yes"/>
  <xsl:template match="/">
    <catalog>
      <xsl:for-each select="books/book">
        <item>
          <name><xsl:value-of select="title"/></name>
          <writer><xsl:value-of select="author"/></writer>
        </item>
      </xsl:for-each>
    </catalog>
  </xsl:template>
</xsl:stylesheet>
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");
const xsltDoc = parser.parseFromString(xsltString, "application/xml");

const xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsltDoc);

// Perform the transformation, returning the result as a new XML document
const resultDoc = xsltProcessor.transformToDocument(xmlDoc);

// Serialize the result document to a string
const serializer = new XMLSerializer();
const resultString = serializer.serializeToString(resultDoc);

// Display the transformed XML in the page
document.getElementById("result").textContent = resultString;

Result

Specifications

Specification
DOM
# dom-xsltprocessor-transformtodocument

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transformToDocument
Chrome – Full support
Chrome 1 (Release date: 2008-12-11)
footnote
footnote Chrome returns null if an error occurs.
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote
footnote Edge returns null if an error occurs.
Firefox – Full support
Firefox 1 (Release date: 2004-11-09)
footnote
footnote Firefox throws an exception if an error occurs.
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote
footnote Opera 12.1 and earlier throws an exception if an error occurs.
footnote Opera 15 and later returns null if an error occurs.
Safari – Full support
Safari 3.1 (Release date: 2008-03-18)
footnote
footnote Safari returns null if an error occurs.
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote
footnote Chrome Android returns null if an error occurs.
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote
footnote Firefox for Android throws an exception if an error occurs.
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote
footnote Opera Android 12.1 and earlier throws an exception if an error occurs.
footnote Opera Android 14 and later returns null if an error occurs.
Safari on iOS – Full support
Safari on iOS 2 (Release date: 2008-07-11)
footnote
footnote Safari on iOS returns null if an error occurs.
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote
footnote Samsung Internet returns null if an error occurs.
WebView Android – Full support
WebView Android 3 (Release date: 2011-02-22)
footnote
footnote WebView returns null if an error occurs.
WebView on iOS – Full support
WebView on iOS 2 (Release date: 2008-07-11)
footnote
footnote WebView on iOS returns null if an error occurs.

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

See also