new XSLTProcessor() — Methode · JavaScript-Referenz

Signatur

new XSLTProcessor()

Beschreibung

Mit new XSLTProcessor() erzeugst du einen leeren XSLT-Prozessor. Er hat noch kein Stylesheet: Das lädst du erst mit importStylesheet(). Danach kannst du XML-Knoten mit transformToFragment() in ein DocumentFragment umwandeln, das du direkt ins Dokument einfügen kannst. Mit transformToDocument() entsteht stattdessen ein vollständiges neues Document.

Das ist nützlich, wenn eine Schnittstelle XML liefert (z. B. RSS/Atom-Feeds, SOAP-Antworten oder ältere Unternehmens-APIs) und du daraus im Browser HTML erzeugen willst, ohne dafür Code auf dem Server zu schreiben. Mit setParameter() übergibst du Werte an <xsl:param>-Elemente. So kannst du dasselbe Stylesheet mehrfach mit unterschiedlichen Werten verwenden.

Der Konstruktor erwartet keine Argumente. Eine Instanz kannst du beliebig oft wiederverwenden. Mit reset() setzt du sie wieder in den Ausgangszustand zurück, dabei werden Stylesheet und Parameter entfernt. Browser unterstützen nur XSLT 1.0. XSLT 2.0/3.0 und XPath 2.0 funktionieren nicht.

Rückgabewert

Typ

XSLTProcessor

Beschreibung

Ein neues XSLTProcessor-Objekt ohne Stylesheet und ohne gesetzte Parameter.

Beispiele

Prozessor erzeugen und XML in HTML umwandeln

const xmlText = `<buecher>
  <buch><titel>JavaScript lernen</titel></buch>
  <buch><titel>XSLT kompakt</titel></buch>
</buecher>`;

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

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlText, 'application/xml');
const xslDoc = parser.parseFromString(xslText, '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

Stylesheet per fetch laden und Parameter übergeben

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, xsl] = await Promise.all([
    loadXml('/feed.xml'),
    loadXml('/feed.xsl')
  ]);

  const processor = new XSLTProcessor();
  processor.importStylesheet(xsl);
  // entspricht <xsl:param name="maxEintraege"/>
  processor.setParameter(null, 'maxEintraege', 5);

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

renderFeed().catch(console.error);

Instanz wiederverwenden und zurücksetzen

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

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

console.log(processor.transformToFragment(xml, document).textContent);
processor.setParameter(null, 'name', 'Anna');
console.log(processor.transformToFragment(xml, document).textContent);
console.log(processor.getParameter(null, 'name'));

processor.reset(); // Stylesheet und Parameter werden entfernt
console.log(processor.getParameter(null, 'name'));

Hallo, Welt! Hallo, Anna! Anna null

// Wichtig · Fallstricke

Nur im Browser: XSLTProcessor gibt es weder in Node.js noch in Web Workern. Unter Node brauchst du Bibliotheken wie xslt-processor oder saxon-js.
Zukunft unsicher: Die Chrome-Entwickler haben vorgeschlagen, XSLT aus dem Browser zu entfernen, und die anderen Browser-Hersteller unterstützen das. Bei Neuentwicklungen solltest du deshalb besser XML mit DOMParser einlesen und das HTML per JavaScript erzeugen, oder die Umwandlung auf dem Server erledigen.
Nur XSLT 1.0: Stylesheets mit version="2.0" oder Funktionen aus XPath 2.0 schlagen fehl. Oft passiert das ohne aussagekräftige Fehlermeldung: transformToFragment() gibt dann einfach null zurück oder ein leeres Fragment.
Parser-Fehler prüfen: DOMParser wirft bei ungültigem XML keine Ausnahme, sondern liefert ein Dokument mit einem <parsererror>-Element. Prüfe das vor importStylesheet(), zum Beispiel mit doc.querySelector('parsererror').
Sicherheit: Das Ergebnis der Umwandlung wird als echtes DOM eingefügt. Stammen das XML oder das Stylesheet aus nicht vertrauenswürdigen Quellen, kann das zu XSS führen, etwa durch disable-output-escaping oder erzeugte on*-Attribute. Nutze nur vertrauenswürdige Stylesheets und beachte die Content Security Policy (CSP). Stylesheets, die über fetch geladen werden, unterliegen den CORS-Regeln.
Unterschiede zwischen Browsern: xsl:include/xsl:import, document() und xsl:output verhalten sich je nach Engine unterschiedlich. Teste in allen Zielbrowsern.

Siehe auch

XSLTProcessor XSLTProcessor.prototype.importStylesheet() XSLTProcessor.prototype.transformToFragment() XSLTProcessor.prototype.transformToDocument() XSLTProcessor.prototype.setParameter() DOMParser XMLSerializer