XSLTProcessor — Schnittstelle · JavaScript-Referenz

Signatur

interface XSLTProcessor

Beschreibung

XSLTProcessor ist die browserseitige Schnittstelle zu XSLT-Transformationen. Man erzeugt eine Instanz mit new XSLTProcessor(), lädt per importStylesheet() ein XSLT-Stylesheet (als DOM-Knoten) und transformiert anschließend beliebig viele Quellknoten mit transformToDocument() oder transformToFragment().

Typische Einsatzfälle sind das Umwandeln von XML-Daten (z. B. RSS/Atom-Feeds, SOAP-Antworten, Konfigurationsdateien, TEI/DocBook) in HTML direkt im Browser, ohne serverseitiges Rendering. Über setParameter() lassen sich Werte an <xsl:param>-Elemente übergeben, sodass ein Stylesheet wiederverwendbar bleibt (z. B. Sortierung, Filter, Sprache).

Wichtige Methoden:

importStylesheet(style) – lädt ein Stylesheet (Document oder <xsl:stylesheet>-Element).
transformToDocument(source) – liefert ein neues Document.
transformToFragment(source, ownerDocument) – liefert ein DocumentFragment, das in ownerDocument eingefügt werden kann.
setParameter(namespaceURI, localName, value), getParameter(), removeParameter(), clearParameters() – Verwaltung von Stylesheet-Parametern.
reset() – entfernt Stylesheet und alle Parameter.

Browser unterstützen ausschließlich XSLT 1.0 (inklusive XPath 1.0). Features aus XSLT 2.0/3.0 wie xsl:function oder reguläre Ausdrücke stehen nicht zur Verfügung.

Parameter

Name	Typ	Beschreibung
$style Pflicht	Document \| Element	Parameter von `importStylesheet()`: das XSLT-Stylesheet als DOM-Knoten (`Document` oder `<xsl:stylesheet>`-/`<xsl:transform>`-Element).
$source Pflicht	Node	Parameter von `transformToDocument()`/`transformToFragment()`: der zu transformierende Quellknoten (meist ein XML-`Document`).
$ownerDocument Pflicht	Document	Parameter von `transformToFragment()`: das Dokument, dem das erzeugte Fragment gehören soll (meist `document`).
$namespaceURI Pflicht	string \| null	Namensraum des XSLT-Parameters bei `setParameter()`/`getParameter()`/`removeParameter()`; bei Parametern ohne Namensraum `null` oder `""`.
$localName Pflicht	string	Name des `<xsl:param>` ohne Präfix.
$value Pflicht	string \| number \| boolean \| Node \| NodeList	Wert für `setParameter()`; wird im Stylesheet als XPath-Wert verfügbar.

Rückgabewert

Typ

XSLTProcessor

Beschreibung

new XSLTProcessor() liefert eine neue Prozessor-Instanz. transformToDocument() gibt ein Document, transformToFragment() ein DocumentFragment zurück; bei Fehlern je nach Browser null oder eine Ausnahme.

Beispiele

Instanziierung und einfache Transformation zu HTML

const xml = `<buecher>
  <buch><titel>Faust</titel><autor>Goethe</autor></buch>
  <buch><titel>Die Räuber</titel><autor>Schiller</autor></buch>
</buecher>`;

const xsl = `<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>
  <xsl:template match="/">
    <ul>
      <xsl:for-each select="buecher/buch">
        <li><xsl:value-of select="titel"/> – <xsl:value-of select="autor"/></li>
      </xsl:for-each>
    </ul>
  </xsl:template>
</xsl:stylesheet>`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xml, 'application/xml');
const xslDoc = parser.parseFromString(xsl, 'application/xml');

const processor = new XSLTProcessor();
processor.importStylesheet(xslDoc);

const fragment = processor.transformToFragment(xmlDoc, document);
document.body.append(fragment);
console.log(document.body.querySelectorAll('li').length);

2

RSS-Feed per fetch laden und mit Parameter filtern

const loadXml = async (url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const text = await res.text();
  return new DOMParser().parseFromString(text, 'application/xml');
};

const renderFeed = async () => {
  const [feed, stylesheet] = await Promise.all([
    loadXml('/feed.xml'),
    loadXml('/feed.xsl') // enthält <xsl:param name="maxItems" select="10"/>
  ]);

  const processor = new XSLTProcessor();
  processor.importStylesheet(stylesheet);
  processor.setParameter(null, 'maxItems', 5);

  console.log(processor.getParameter(null, 'maxItems'));

  const html = processor.transformToFragment(feed, document);
  document.querySelector('#feed').replaceChildren(html);
};

renderFeed().catch(console.error);

5

Ergebnis als Dokument serialisieren und Prozessor wiederverwenden

const parser = new DOMParser();
const xslDoc = parser.parseFromString(`<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:param name="prefix" select="'Hallo'"/>
  <xsl:template match="/name">
    <gruss><xsl:value-of select="concat($prefix, ', ', .)"/></gruss>
  </xsl:template>
</xsl:stylesheet>`, 'application/xml');

const processor = new XSLTProcessor();
processor.importStylesheet(xslDoc);

const greet = (name) => {
  const src = parser.parseFromString(`<name>${name}</name>`, 'application/xml');
  const out = processor.transformToDocument(src);
  return new XMLSerializer().serializeToString(out);
};

console.log(greet('Anna'));
processor.setParameter(null, 'prefix', 'Servus');
console.log(greet('Ben'));
processor.clearParameters();
processor.reset(); // Stylesheet entfernt – vor erneuter Nutzung neu importieren

<gruss>Hallo, Anna</gruss> <gruss>Servus, Ben</gruss>

// Wichtig · Fallstricke

Zukunft ungewiss: Die Browserhersteller (Chrome, Firefox, Safari) diskutieren seit 2025, XSLT und damit XSLTProcessor aus dem Web zu entfernen; Chrome hat die Abkündigung bereits angekündigt. Für neue Projekte besser eine JavaScript-Bibliothek (z. B. SaxonJS) nutzen oder serverseitig transformieren.
Nur XSLT 1.0: Keine Unterstützung für XSLT 2.0/3.0 oder XPath 2.0+.
Parser-Fehler prüfen: DOMParser wirft keine Ausnahme, sondern liefert ein Dokument mit <parsererror>. Vor importStylesheet() mit doc.querySelector('parsererror') prüfen. Fehlerhafte Stylesheets führen je nach Browser zu Ausnahmen oder zu einem Rückgabewert null.
Sicherheit: Das Ergebnis einer Transformation mit method="html" wird wie HTML-Markup eingefügt. Stammen XML oder XSL aus nicht vertrauenswürdigen Quellen, drohen XSS-Lücken (z. B. über xsl:attribute mit onclick oder javascript:-URLs). Stylesheets nur aus vertrauenswürdigen Quellen laden; document()- und xsl:import-Aufrufe unterliegen der Same-Origin-Policy bzw. CORS.
transformToFragment() mit method="text" liefert ein Fragment mit einem einzelnen Textknoten.
In Node.js gibt es XSLTProcessor nicht; dort sind Bibliotheken wie xslt-processor oder SaxonJS nötig.
Nach reset() muss vor der nächsten Transformation erneut ein Stylesheet importiert werden.

Siehe auch

RTCError RTCRtpReceiver Sensor XPathResult XRSession