XSLTProcessor - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

XSLTProcessor

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Ein XSLTProcessor wendet eine XSLT-Stylesheet-Transformation auf ein XML-Dokument an, um ein neues XML-Dokument als Ausgabe zu erzeugen. Er verfügt über Methoden zum Laden des XSLT-Stylesheets, zum Manipulieren von <xsl:param>-Parameterwerten und zum Anwenden der Transformation auf Dokumente.

In diesem Artikel

Konstruktor

XSLTProcessor()

Erstellt einen neuen XSLTProcessor.

Instanzmethoden

XSLTProcessor.importStylesheet()

Importiert das XSLT-Stylesheet. Wenn der gegebene Knoten ein Dokumentknoten ist, können Sie eine vollständige XSL-Transformation oder eine Literal-Result-Element-Transformation übergeben; andernfalls muss es sich um ein <xsl:stylesheet> oder <xsl:transform>-Element handeln.

XSLTProcessor.transformToFragment()

Transformiert die Knotenquelle durch Anwenden des mit der Funktion XSLTProcessor.importStylesheet() importierten XSLT-Stylesheets. Das Eigentümerdokument des resultierenden Dokumentfragments ist der Eigentümerknoten.

XSLTProcessor.transformToDocument()

Transformiert die Knotenquelle durch Anwenden des mit der Funktion XSLTProcessor.importStylesheet() importierten XSLT-Stylesheets.

XSLTProcessor.setParameter()

Setzt einen Parameterwert (<xsl:param>) im importierten XSLT-Stylesheet.

XSLTProcessor.getParameter()

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

XSLTProcessor.removeParameter()

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

XSLTProcessor.clearParameters()

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

XSLTProcessor.reset()

Entfernt alle Parameter und Stylesheets aus dem XSLTProcessor.

Instanzeigenschaften

Diese Schnittstelle hat keine Eigenschaften.

Beispiele

Instanziierung eines XSLTProcessor

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
  // …
}

Erstellen eines XML-Dokuments basierend auf einem Teil des DOM eines Dokuments

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

Um einen Teil des DOMs einer Seite zu verarbeiten, ist es notwendig, zuerst ein XML-Dokument im Speicher zu erstellen. Angenommen, dass das zu verarbeitende DOM von einem Element mit der ID example enthalten wird, kann dieses DOM mit der Methode Document.importNode() des in Speicher gehaltenen XML-Dokuments "geklont" werden. Document.importNode() ermöglicht das Übertragen eines DOM-Fragments zwischen Dokumenten, in diesem Fall von einem HTML-Dokument zu einem XML-Dokument. Der erste Parameter referenziert den zu klonenden DOM-Knoten. Wenn der zweite Parameter auf "true" gesetzt wird, werden auch alle Nachkommen (ein tiefer Klon) geklont. Das geklonte DOM kann dann mit Node.appendChild() in das XML-Dokument eingefügt werden, wie unten gezeigt.

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);

Sobald das Stylesheet importiert wurde, muss XSLTProcessor zwei Methoden für die eigentliche Transformation ausführen, nämlich XSLTProcessor.transformToDocument() und XSLTProcessor.transformToFragment(). XSLTProcessor.transformToDocument() gibt ein vollständiges XML-Dokument zurück, während XSLTProcessor.transformToFragment() ein Dokumentfragment zurückgibt, das leicht zu einem bestehenden Dokument hinzugefügt werden kann. Beide Methoden nehmen das XML-Dokument als ersten Parameter, das transformiert werden soll. XSLTProcessor.transformToFragment() benötigt einen zweiten Parameter, nämlich das Dokumentobjekt, das das erzeugte Fragment besitzen wird. Wenn das erzeugte Fragment in das aktuelle HTML-Dokument eingefügt wird, reicht es aus, document zu übergeben.

Erstellen eines XML-Dokuments aus einem String 'XML Soup'

Sie können den DOMParser verwenden, um ein XML-Dokument aus einem XML-String zu erstellen.

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

Durchführung der Transformation

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

Einfaches Beispiel

Das einfache Beispiel lädt eine XML-Datei und wendet eine XSL-Transformation darauf an. Dies sind die gleichen Dateien, die im Generieren von HTML Beispiel verwendet werden. Die XML-Datei beschreibt einen Artikel und die XSL-Datei formatiert die Informationen zur 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 (xslStylesheet) als auch die .xml (xmlDoc) Dateien in den Speicher. Die .xsl-Datei wird dann importiert (xsltProcessor.importStylesheet(xslStylesheet)) und die Transformation ausgeführt (xsltProcessor.transformToFragment(xmlDoc, document)). Dadurch können Daten nach dem Laden der Seite abgefragt werden, ohne einen neuen Seitenaufruf zu initiieren.

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 divs basierend auf deren Inhalt. Das Beispiel erlaubt es, den Inhalt mehrfach zu sortieren, abwechselnd in aufsteigender und absteigender Reihenfolge. Das JavaScript lädt die .xsl-Datei nur beim ersten Sortieren und setzt die xslLoaded-Variable auf wahr, sobald es mit dem Laden der Datei abgeschlossen ist. Mit der Methode XSLTProcessor.getParameter() kann der Code feststellen, ob in aufsteigender oder absteigender Reihenfolge sortiert werden soll. Es wird standardmäßig aufsteigend sortiert, wenn der Parameter leer ist (beim ersten Sortieren, da kein Wert dafür in der XSLT-Datei vorhanden ist). Der Sortierwert wird mit XSLTProcessor.setParameter() festgelegt.

Die XSLT-Datei hat einen Parameter namens myOrder, den JavaScript setzt, um die Sortiermethode zu ändern. Das Attribut order des <xsl:sort>-Elements kann auf den Wert des Parameters mit $myOrder zugreifen. Der Wert muss jedoch ein XPath-Ausdruck und kein String sein, daher wird {$myOrder} verwendet. Unter Verwendung von {} wird der Inhalt als XPath-Ausdruck ausgewertet.

Sobald die Transformation abgeschlossen ist, wird das Ergebnis, wie in diesem Beispiel gezeigt, dem Dokument hinzugefügt.

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>

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Document Object Model (DOM)
XSLTProcessor
Konstruktor
1. XSLTProcessor()
Instanzmethoden
Verwandte Seiten für DOM
Anleitungen
1. Anatomie des DOM
2. Attributreflexion
3. Auswahl und Traversierung im DOM-Baum
4. Erstellen und Aktualisieren des DOM-Baums
5. Arbeiten mit Ereignissen

XSLTProcessor

In diesem Artikel

Konstruktor

Instanzmethoden

Instanzeigenschaften

Beispiele

Instanziierung eines XSLTProcessor

Erstellen eines XML-Dokuments basierend auf einem Teil des DOM eines Dokuments

Erstellen eines XML-Dokuments aus einem String 'XML Soup'

Durchführung der Transformation

Einfaches Beispiel

XML

XSLT

JavaScript

Fortgeschrittenes Beispiel

XHTML

JavaScript

XSLT

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN