x-ml-data https://kherrick.github.io/x-ml-data/ A technologist and web developer https://kherrick.github.io/x-ml-data/2025/01/exercising-xslt/ Exercising XSLT Sat, 4 Jan 2025 17:26:00 -0600 markup stylesheets

It turns out applying XSLT imperatively using the XSLTProcessor interface isn't too difficult at all, and doing so enables the manipulation of XML documents using basic Javascript. To start, setup a new DOM and XSLT processor. 

const domParser = new DOMParser();
const xsltProcessor = new XSLTProcessor();

Fetch the XSLT file and parse the response to a string.

const xslResponse = await fetch(
  "2025/01/exercising-xslt/exercising-xslt.xsl"
);

const xslText = await xslResponse.text();

const xslStylesheet = domParser.parseFromString(
  xslText,
  "application/xml"
);

xsltProcessor.importStylesheet(xslStylesheet);

After xSLTProcessor has imported xslStylesheet, it allows modifiying <xsl:param> values, and executing transformations. 

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output
    doctype-public=""
    doctype-system=""
    indent="yes"
    method="html"
  />
  <xsl:template match="/">
    <xsl:for-each select="/x-ml/x-ml-item">
      <x-ml-item-title>
        <link
          href="components/XMLItemTitle/XMLItemTitle.css"
          rel="stylesheet"
        />
        <h3>
          <a>
            <xsl:attribute name="href">
              <xsl:value-of select="normalize-space(x-ml-item-link)" />
            </xsl:attribute>
            <xsl:value-of select="normalize-space(x-ml-item-title)" />
          </a>
        </h3>
      </x-ml-item-title>
    </xsl:for-each>
  </xsl:template>
</xsl:stylesheet>

An XML document is then loaded to a string. Here we'll utilize the <x-ml-item-title> tag from this <x-ml-item> source itself. 

const xmlResponse = await fetch("2025/01/exercising-xslt/index.xml");
const xmlText = await xmlResponse.text();
const xmlDoc = domParser.parseFromString(xmlText, "application/xml");

Transform the node source to a document fragment and append the result to the target in the DOM. 

const result = xsltProcessor.transformToFragment(xmlDoc, document);
document.getElementById("exercising-xslt-target").append(result);
 
<div id="exercising-xslt-target"></div>

If JavaScript is enabled, the <x-ml-item-title> should be rendered again, above the example HTML showing the id exercising-xslt-target.