XSLTProcessor
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Un objet XSLTProcessor
applique une feuille de style de transformation XSLT sur un document XML afin de produire un nouveau document XML. Il dispose de méthodes pour charger la feuille de styles XSLT, manipuler les valeurs des paramètres <xsl:param>
, et pour appliquer la transformation correspondante à des documents.
Constructeur
XSLTProcessor()
-
Crée un nouvel objet
XSLTProcessor
.
Méthodes des instances
XSLTProcessor.importStylesheet()
-
Importe la feuille de styles XSLT. Si le nœud fourni est un document, ce peut être une transformation XSL complète ou une transformation d'élément littéral résultant ; sinon, ce doit être un élément
<xsl:stylesheet>
ou<xsl:transform>
. XSLTProcessor.transformToFragment()
-
Transforme le nœud source en appliquant la feuille de style XSLT importée à l'aide de la fonction
XSLTProcessor.importStylesheet()
. Le document propriétaire du fragment de document résultant est le nœud propriétaire. XSLTProcessor.transformToDocument()
-
Transforme le nœud source en appliquant la feuille de style XSLT importée à l'aide de la fonction
XSLTProcessor.importStylesheet()
. XSLTProcessor.setParameter()
-
Définit la valeur d'un paramètre (
<xsl:param>
) présent dans la feuille de style XSLT importée. XSLTProcessor.getParameter()
-
Récupère la valeur d'un paramètre de la feuille de style XSLT.
XSLTProcessor.removeParameter()
-
Supprime le paramètre s'il avait précédemment été défini. L'objet
XSLTProcessor
utilise alors la valeur par défaut du paramètre telle que spécifiée dans la feuille de styles XSLT. XSLTProcessor.clearParameters()
-
Supprime tous les paramètres définis pour l'instance
XSLTProcessor
. L'objetXSLTProcessor
utilisera alors les valeurs par défaut fournies dans la feuille de styles XSLT. XSLTProcessor.reset()
-
Supprime tous les paramètres et toutes les feuilles de styles de l'objet
XSLTProcessor
courant.
Propriétés des instances
Cette interface ne contient aucune propriété.
Exemples
Instancier un objet XSLTProcessor
const xsltProcessor = new XSLTProcessor();
// On charge le fichier XSL avec une requête XHR synchrone
// (le troisième paramètre vaut false)
const maRequeteXHR = new XMLHttpRequest();
maRequeteXHR.open("GET", "example.xsl", false);
maRequeteXHR.send(null);
const xslRef = maRequeteXHR.responseXML;
// Et on importe le contenu XSL
xsltProcessor.importStylesheet(xslRef);
Créer un document XML à partir d'un fragment du DOM d'un document
Pour obtenir une transformation effective, il faut fournir un document XML à l'objet XSLTProcessor
. Ce document XML sera utilisé avec le fichier XSL importé afin de produire le résultat final. Le document XML peut être un fichier séparé que l'on charge ou faire partie de la page existante. Pour traiter une partie du DOM d'une page, il faut d'abord créer un document XML en mémoire.
Dans l'exemple qui suit, nous allons charger le fragment du DOM de l'élément avec l'identifiant example
, dans un document XML en mémoire grâce à la méthode Document.importNode()
. Cette dernière permet de transférer un fragment de DOM d'un document à un autre. Pour notre exemple, on le transfère du document HTML au document XML en mémoire. Le premier paramètre de la méthode indique le nœud du DOM à cloner et le deuxième paramètre, s'il vaut true
, indique qu'il faut également cloner les éléments descendants. Le DOM ainsi cloné peut alors être inséré dans le document XML à l'aide de Node.appendChild()
.
// On crée un nouveau document XML en mémoire
const xmlRef = document.implementation.createDocument("", "", null);
// On déplace une partie du DOM du document HTML vers un document XML
// importNode() nous permet de cloner les nœuds à transformer avec XSLT
// et son deuxième paramètre nous permet d'avoir un clone profond
const myNode = document.getElementById("example");
const clonedNode = xmlRef.importNode(myNode, true);
// On ajoute le DOM cloné au document XML
xmlRef.appendChild(clonedNode);
Une fois la feuille de style importée, on utilisera XSLTProcessor.transformToDocument()
ou XSLTProcessor.transformToFragment()
pour appliquer effectivement la transformation. XSLTProcessor.transformToDocument()
renvoie un document XML entier tandis que XSLTProcessor.transformToFragment()
renvoie un fragment qui peut être ajouté à un document existant. Le premier argument de ces deux méthodes correspond au document XML à transformer. XSLTProcessor.transformToFragment()
doit être appelée avec un deuxième paramètre, correspondant au document qui sera propriétaire du fragment généré. Si le fragment généré sera inséré dans le document HTML courant, on pourra passer la valeur document
.
Créer un document XML à partir d'une chaîne de caractères contenant du XML
DOMParser
peut être utilisé pour créer un document XML à partir d'une chaîne de caractères contenant du XML.
const parser = new DOMParser();
const doc = parser.parseFromString(aStr, "text/xml");
Appliquer la transformation
const fragment = xsltProcessor.transformToFragment(xmlRef, document);
Exemple simple
Dans cet exemple, on charge un fichier XML et on lui applique une transformation XSL. Le fichier XML décrit un article et le fichier XSL transforme les informations pour leur affichage.
XML
<?xml version="1.0"?>
<myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
<myNS:Title>Mon article</myNS:Title>
<myNS:Authors>
<myNS:Author company="Foopy Corp.">M. Robert</myNS:Author>
<myNS:Author>M. Dupont</myNS:Author>
</myNS:Authors>
<myNS:Body>
Bien le <b>bonjour</b>.
</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 />
Autrices ou auteurs : <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>
JavaScript
On utilise deux requêtes XMLHTTPRequest
synchrones pour charger les fichiers XSL (xslStylesheet
) et XML (xmlDoc
) en mémoire. Le fichier XSL est ensuite importé (xsltProcessor.importStylesheet(xslStylesheet)
), puis la transformation appliquée (xsltProcessor.transformToFragment(xmlDoc, document)
). De cette façon, on récupère des données après le chargement de la page, sans avoir besoin de déclencher un rechargement de la page.
let xslStylesheet;
const xsltProcessor = new XSLTProcessor();
let myDOM;
let xmlDoc;
function init() {
// On charge le fichier XSLT example1.xsl
let myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", "example1.xsl", false);
myXMLHTTPRequest.send(null);
xslStylesheet = myXMLHTTPRequest.responseXML;
xsltProcessor.importStylesheet(xslStylesheet);
// On charge le fichier XML example1.xml
myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", "example1.xml", false);
myXMLHTTPRequest.send(null);
xmlDoc = myXMLHTTPRequest.responseXML;
const fragment = xsltProcessor.transformToFragment(xmlDoc, document);
myDOM = fragment;
document.getElementById("example").textContent = "";
document.getElementById("example").appendChild(fragment);
}
Exemple avancé
Dans cet exemple avancé, on trie plusieurs éléments <div>
selon leur contenu. Cet exemple permet de trier le contenu à plusieurs reprises, d'alterner entre un ordre croissant ou décroissant. Le code JavaScript charge le fichier XSL pour le premier tri puis marque la variable xslloaded
avec true
lorsque le chargement du fichier est terminé. Grâce à la méthode XSLTProcessor.getParameter()
, on peut savoir si on souhaite un tri croissant ou décroissant. La valeur par défaut correspond à un tri croissant. L'ordre du tri peut être fixé à l'aide de la méthode XSLTProcessor.setParameter()
.
Le fichier XSLT contient un paramètre myOrder
que le code JavaScript fixe pour changer la méthode de tri. L'attribut order
de l'élément xsl:sort
peut accéder à la valeur du paramètre avec $myOrder
. Toutefois, il faut que la valeur soit une expression XPath et pas une chaîne de caractères, c'est pour cela qu'on écrit {$myOrder}
. Les accolades ({}
) permettent d'évaluer le contenu dans une expression XPath.
Une fois la transformation terminée, on ajoute le résultat au document.
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 xsltProcessor = new XSLTProcessor();
let myDOM;
let xmlRef = document.implementation.createDocument("", "", null);
function sort() {
if (!xslloaded) {
const p = new XMLHttpRequest();
p.open("GET", "example2.xsl", false);
p.send(null);
xslRef = p.responseXML;
xsltProcessor.importStylesheet(xslRef);
xslloaded = true;
}
// On crée un nouveau document XML en mémoire
xmlRef = document.implementation.createDocument("", "", null);
// On veut transférer une partie du DOM du document HTML à un document
// XML. importNode() est utilisée pour cloner les nœuds à traiter avec
// XSLT. Le deuxième argument à true permet d'avoir un clone profond
const myNode = document.getElementById("example");
const clonedNode = xmlRef.importNode(myNode, true);
// Après le clonage, on ajoute le contenu à la suite
xmlRef.appendChild(clonedNode);
// On définit le paramètre de tri dans le fichier XSL
const sortVal = xsltProcessor.getParameter(null, "myOrder");
if (sortVal === "" || sortVal === "descending") {
xsltProcessor.setParameter(null, "myOrder", "ascending");
} else {
xsltProcessor.setParameter(null, "myOrder", "descending");
}
// On lance la transformation
const fragment = xsltProcessor.transformToFragment(xmlRef, document);
// On réinitialise le contenu
document.getElementById("example").textContent = "";
myDOM = fragment;
// On ajoute le nouveau contenu transformé
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>
Spécifications
Specification |
---|
DOM Standard # interface-xsltprocessor |
Compatibilité des navigateurs
BCD tables only load in the browser