1. Web
  2. Web-APIs
  3. XSLTProcessor

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

XSLTProcessor

Deprecated

Avoid using this feature in new projects. XSLT is a candidate for removal from browsers because browser implementations are highly susceptible to memory safety vulnerabilities. This feature may be a candidate for removal from web standards or browsers.

Ein XSLTProcessor wendet eine XSLT-Stylesheet-Transformation auf ein XML-Dokument an und erzeugt als Ausgabe ein neues XML-Dokument. Er bietet Methoden, um das XSLT-Stylesheet zu laden, Parameterwerte für <xsl:param> zu ändern und die Transformation auf Dokumente anzuwenden.

Konstruktor

XSLTProcessor()

Erstellt einen neuen XSLTProcessor.

Instanzeigenschaften

Diese Schnittstelle hat keine Eigenschaften.

Instanzmethoden

XSLTProcessor.importStylesheet()

Importiert das XSLT-Stylesheet. Wenn der übergebene Knoten ein Dokumentknoten ist, können Sie eine vollständige XSL-Transformation oder eine Transformation mit einem literalen Ergebniselement übergeben. Andernfalls muss es sich um ein <xsl:stylesheet>- oder <xsl:transform>-Element handeln.

XSLTProcessor.transformToFragment()

Transformiert den Quellknoten durch Anwendung des XSLT-Stylesheets, das mit der Funktion XSLTProcessor.importStylesheet() importiert wurde. Das übergeordnete Dokument des erzeugten Dokumentfragments ist das übergeordnete Dokument des Knotens.

XSLTProcessor.transformToDocument()

Transformiert den Quellknoten durch Anwendung des XSLT-Stylesheets, das mit der Funktion XSLTProcessor.importStylesheet() importiert wurde.

XSLTProcessor.setParameter()

Setzt den Wert eines Parameters (<xsl:param>) im importierten XSLT-Stylesheet.

XSLTProcessor.getParameter()

Gibt den Wert eines Parameters aus dem XSLT-Stylesheet zurück.

XSLTProcessor.removeParameter()

Entfernt einen Parameter, wenn er zuvor gesetzt wurde. Dadurch verwendet der XSLTProcessor für den Parameter den im XSLT-Stylesheet angegebenen Standardwert.

XSLTProcessor.clearParameters()

Entfernt alle gesetzten Parameter aus dem XSLTProcessor. Der XSLTProcessor verwendet anschließend die im XSLT-Stylesheet angegebenen Standardwerte.

XSLTProcessor.reset()

Entfernt alle Parameter und Stylesheets aus dem XSLTProcessor.

Beispiele

Einen XSLTProcessor instanziieren

js
async function init() {
  const parser = new DOMParser();
  const xsltProcessor = new XSLTProcessor();

  // Load the XSLT file, example1.xsl
  const xslResponse = await fetch("example1.xsl");
  const xslText = await xslResponse.text();
  const xslStylesheet = parser.parseFromString(xslText, "application/xml");
  xsltProcessor.importStylesheet(xslStylesheet);

  // process the file
  // …
}

Ein XML-Dokument aus einem Teil des DOM eines Dokuments erstellen

Für die eigentliche Transformation benötigt XSLTProcessor ein XML-Dokument, das zusammen mit der importierten XSL-Datei verwendet wird, um das Endergebnis zu erzeugen. Das XML-Dokument kann eine separate XML-Datei sein, die mit fetch() geladen wird, oder Teil der vorhandenen Seite.

Um einen Teil des DOM einer Seite zu verarbeiten, müssen Sie zunächst ein XML-Dokument im Speicher erstellen. Angenommen, das zu verarbeitende DOM befindet sich in einem Element mit der ID example, können Sie dieses DOM mithilfe der Methode Document.importNode() des XML-Dokuments im Speicher „klonen“. Mit Document.importNode() lässt sich ein DOM-Fragment zwischen Dokumenten übertragen, in diesem Fall von einem HTML-Dokument in ein XML-Dokument. Der erste Parameter verweist auf den zu klonenden DOM-Knoten. Wenn Sie den zweiten Parameter auf „true“ setzen, werden auch alle Nachfahren geklont (eine tiefe Kopie). Das geklonte DOM kann anschließend wie unten gezeigt mit Node.appendChild() in das XML-Dokument eingefügt werden.

js
// Create a new XML document in memory
const 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
const myNode = document.getElementById("example");
const clonedNode = xmlRef.importNode(myNode, true);

// Add the cloned DOM into the XML document
xmlRef.appendChild(clonedNode);

Nachdem das Stylesheet importiert wurde, stehen dem XSLTProcessor für die eigentliche Transformation zwei Methoden zur Verfügung: XSLTProcessor.transformToDocument() und XSLTProcessor.transformToFragment(). XSLTProcessor.transformToDocument() gibt ein vollständiges XML-Dokument zurück, während XSLTProcessor.transformToFragment() ein Dokumentfragment zurückgibt, das sich leicht zu einem vorhandenen Dokument hinzufügen lässt. Beide Methoden erwarten als ersten Parameter das XML-Dokument, das transformiert werden soll. XSLTProcessor.transformToFragment() benötigt einen zweiten Parameter: das Dokumentobjekt, dem das erzeugte Fragment zugeordnet sein soll. Wenn das erzeugte Fragment in das aktuelle HTML-Dokument eingefügt werden soll, reicht es aus, das aktuelle Dokument zu übergeben.

Ein XML-Dokument aus einer XML-Zeichenfolge erstellen

Sie können DOMParser verwenden, um aus einer XML-Zeichenfolge ein XML-Dokument zu erstellen.

js
const parser = new DOMParser();
const doc = parser.parseFromString(str, "text/xml");

Die Transformation durchführen

js
const fragment = xsltProcessor.transformToFragment(xmlRef, document);

Einfaches Beispiel

Das einfache Beispiel lädt eine XML-Datei und wendet eine XSL-Transformation darauf an. Dabei werden dieselben Dateien wie im Beispiel HTML erzeugen verwendet. Die XML-Datei beschreibt einen Artikel, und die XSL-Datei formatiert die Informationen für die Anzeige.

XML

xml
<?xml version="1.0"?>
<myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
  <myNS:Title>My Article</myNS:Title>
  <myNS:Authors>
    <myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
    <myNS:Author>Mr. Bar</myNS:Author>
  </myNS:Authors>
  <myNS:Body>
    The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
  </myNS:Body>
</myNS:Article>

XSLT

xml
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
                   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                   xmlns:myNS="http://devedge.netscape.com/2002/de">

  <xsl:output method="html" />

  <xsl:template match="/">
    <html>

      <head>

        <title>
          <xsl:value-of select="/myNS:Article/myNS:Title"/>
        </title>

        <style>
          .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
        </style>

      </head>

      <body>
        <p class="myBox">
          <span class="title">
            <xsl:value-of select="/myNS:Article/myNS:Title"/>
          </span> <br />

          Authors:   <br />
            <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
          </p>

        <p class="myBox">
          <xsl:apply-templates select="//myNS:Body"/>
        </p>

      </body>

    </html>
  </xsl:template>

  <xsl:template match="myNS:Author">
     --   <xsl:value-of select="." />

    <xsl:if test="@company">
     ::   <b>  <xsl:value-of select="@company" />  </b>
    </xsl:if>

    <br />
  </xsl:template>

  <xsl:template match="myNS:Body">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="@*|node()">
      <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
      </xsl:copy>
  </xsl:template>
</xsl:stylesheet>

Das Beispiel lädt sowohl die .xsl-Datei (xslStylesheet) als auch die .xml-Datei (xmlDoc) in den Speicher. Anschließend wird die .xsl-Datei importiert (xsltProcessor.importStylesheet(xslStylesheet)) und die Transformation ausgeführt (xsltProcessor.transformToFragment(xmlDoc, document)). So können Daten nach dem Laden der Seite abgerufen werden, ohne die Seite erneut laden zu müssen.

JavaScript

js
async function init() {
  const parser = new DOMParser();
  const xsltProcessor = new XSLTProcessor();

  // Load the XSLT file, example1.xsl
  const xslResponse = await fetch("example1.xsl");
  const xslText = await xslResponse.text();
  const xslStylesheet = parser.parseFromString(xslText, "application/xml");
  xsltProcessor.importStylesheet(xslStylesheet);

  // Load the XML file, example1.xml
  const xmlResponse = await fetch("example1.xml");
  const xmlText = await xmlResponse.text();
  const xmlDoc = parser.parseFromString(xmlText, "application/xml");

  const fragment = xsltProcessor.transformToFragment(xmlDoc, document);

  document.getElementById("example").textContent = "";
  document.getElementById("example").appendChild(fragment);
}

init();

Fortgeschrittenes Beispiel

Dieses fortgeschrittene Beispiel sortiert mehrere div-Elemente anhand ihres Inhalts. Der Inhalt lässt sich mehrfach sortieren, wobei zwischen aufsteigender und absteigender Reihenfolge gewechselt wird. Das JavaScript lädt die .xsl-Datei erst beim ersten Sortieren und setzt die Variable xslLoaded auf true, sobald die Datei geladen ist. Mithilfe der Methode XSLTProcessor.getParameter() kann der Code ermitteln, ob aufsteigend oder absteigend sortiert werden soll. Ist der Parameter leer, wird standardmäßig aufsteigend sortiert. Das ist beim ersten Sortieren der Fall, da für den Parameter in der XSLT-Datei kein Wert vorhanden ist. Der Wert für die Sortierreihenfolge wird mit XSLTProcessor.setParameter() gesetzt.

Die XSLT-Datei enthält einen Parameter namens myOrder, den JavaScript setzt, um die Sortierreihenfolge zu ändern. Das order-Attribut des xsl:sort-Elements kann mit $myOrder auf den Wert des Parameters zugreifen. Der Wert muss jedoch ein XPath-Ausdruck und keine Zeichenfolge sein. Deshalb wird {$myOrder} verwendet. Die geschweiften Klammern bewirken, dass ihr Inhalt als XPath-Ausdruck ausgewertet wird.

Nach Abschluss der Transformation wird das Ergebnis wie in diesem Beispiel gezeigt an das Dokument angehängt.

XHTML

html
<div id="example">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

JavaScript

js
let xslRef;
let xslLoaded = false;
const parser = new DOMParser();
const xsltProcessor = new XSLTProcessor();
let myDOM;

let xmlRef = document.implementation.createDocument("", "", null);

async function sort() {
  if (!xslLoaded) {
    const response = await fetch("example2.xsl");
    const xslText = await response.text();
    xslRef = parser.parseFromString(xslText, "application/xml");
    xsltProcessor.importStylesheet(xslRef);
    xslLoaded = true;
  }

  // Create a new XML document in memory
  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
  const myNode = document.getElementById("example");
  const clonedNode = xmlRef.importNode(myNode, true);

  // After cloning, we append
  xmlRef.appendChild(clonedNode);

  // Set the sorting parameter in the XSL file
  const sortVal = xsltProcessor.getParameter(null, "myOrder");

  if (sortVal === "" || sortVal === "descending") {
    xsltProcessor.setParameter(null, "myOrder", "ascending");
  } else {
    xsltProcessor.setParameter(null, "myOrder", "descending");
  }

  // Initiate the transformation
  const fragment = xsltProcessor.transformToFragment(xmlRef, document);

  // Clear the contents
  document.getElementById("example").textContent = "";

  myDOM = fragment;

  // Add the new content from the transformation
  document.getElementById("example").appendChild(fragment);
}

XSLT

xml
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes" />

  <xsl:param name="myOrder" />

  <xsl:template match="/">

    <xsl:apply-templates select="/div//div">
      <xsl:sort select="." data-type="number" order="{$myOrder}" />
    </xsl:apply-templates>
  </xsl:template>

  <xsl:template match="div">
    <xsl:copy-of select="." />
  </xsl:template>
</xsl:stylesheet>

Spezifikationen

Spezifikation
DOM
# interface-xsltprocessor

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden