XSLTProcessor
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Ein XSLTProcessor wendet eine XSLT Stylesheet-Transformation auf ein XML-Dokument an, um ein neues XML-Dokument als Ausgabe zu erzeugen. Er enthält Methoden zum Laden des XSLT-Stylesheets, zum Manipulieren von <xsl:param> Parameterwerten und zum Anwenden der Transformation auf Dokumente.
Konstruktor
XSLTProcessor()-
Erzeugt einen neuen
XSLTProcessor.
Instanzmethoden
XSLTProcessor.importStylesheet()-
Importiert das XSLT-Stylesheet. Wenn der gegebene Knoten ein Dokumentknoten ist, können Sie ein vollständiges XSL-Transform oder eine literal result element transform übergeben; andernfalls muss es ein
<xsl:stylesheet>oder<xsl:transform>Element sein. XSLTProcessor.transformToFragment()-
Transformiert die Quellknoten, indem das mit der Funktion
XSLTProcessor.importStylesheet()importierte XSLT-Stylesheet angewendet wird. Das Owner-Dokument des resultierenden Dokumentfragments ist das Owner-Knoten. XSLTProcessor.transformToDocument()-
Transformiert die Quellknoten, indem das gegebene XSLT-Stylesheet mit der Funktion
XSLTProcessor.importStylesheet()importiert wird. XSLTProcessor.setParameter()-
Setzt einen Parameter (
<xsl:param>) Wert im importierten XSLT-Stylesheet. XSLTProcessor.getParameter()-
Ruft den Wert eines Parameters aus dem XSLT-Stylesheet ab.
XSLTProcessor.removeParameter()-
Entfernt den Parameter, wenn er zuvor gesetzt wurde. Dadurch wird der
XSLTProcessorden Standardwert für den Parameter verwenden, wie im XSLT-Stylesheet angegeben. XSLTProcessor.clearParameters()-
Entfernt alle gesetzten Parameter aus dem
XSLTProcessor. DerXSLTProcessorwird dann die im XSLT-Stylesheet angegebenen Standardwerte verwenden. XSLTProcessor.reset()-
Entfernt alle Parameter und Stylesheets aus dem
XSLTProcessor.
Instanzeigenschaften
Dieses Interface hat keine Eigenschaften.
Beispiele
Instanziieren eines XSLTProcessor
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 eigentliche Transformation benötigt XSLTProcessor ein XML-Dokument, das zusammen mit der importierten XSL-Datei verwendet wird, um das Endergebnis zu produzieren. Das XML-Dokument kann eine separate XML-Datei sein, die mit fetch() geladen wird, oder es kann Teil der vorhandenen Seite sein.
Um einen Teil des DOMs einer Seite zu verarbeiten, muss zuerst ein XML-Dokument im Speicher erstellt werden. Angenommen, das zu verarbeitende DOM befindet sich in einem Element mit der ID example, kann dieses DOM mithilfe der Methode Document.importNode() des XML-Dokuments im Speicher "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. Durch die Angabe des zweiten Parameters als "true" werden alle Nachkommen ebenfalls geklont (ein tiefer Klon). Das geklonte DOM kann dann mit Node.appendChild() in das XML-Dokument eingefügt werden, wie unten gezeigt.
// 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 durchfü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 einfach zu einem bestehenden Dokument hinzugefügt werden kann. Beide nehmen das XML-Dokument als ersten Parameter, das transformiert werden soll. XSLTProcessor.transformToFragment() erfordert einen zweiten Parameter, nämlich das Dokumentobjekt, das das generierte Fragment besitzen wird. Wenn das generierte 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.
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. Diese sind dieselben Dateien, die im Beispiel HTML erzeugen verwendet werden. Die XML-Datei beschreibt einen Artikel und die XSL-Datei formatiert die Informationen zur Anzeige.
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 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)). Dies ermöglicht das Abrufen von Daten, nachdem die Seite geladen wurde, ohne einen erneuten Seitenaufruf einzuleiten.
JavaScript
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 ihrem Inhalt. Das Beispiel erlaubt das mehrfache Sortieren des Inhalts, abwechselnd in aufsteigender und absteigender Reihenfolge. Das JavaScript lädt die .xsl Datei nur beim ersten Sortieren und setzt die Variable xslLoaded auf true, sobald das Laden der Datei abgeschlossen ist. Mithilfe 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 (das erste Mal, dass die Sortierung stattfindet, da kein Wert dafür in der XSLT-Datei vorhanden ist). Der Sortierwert wird mithilfe von 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. Durch die 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
<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
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 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
| Specification |
|---|
| DOM # interface-xsltprocessor |
Browser-Kompatibilität
Loading…