Cours de XML - Utilisation du DOM et XSLT dynamique

version 1.10, dernière mise à jour le 11 juillet 2005.

   

Table des matières (TdM)

  1. I. Insertion de code JavaScript dans une page
    1. Introduction
    2. Insertion de code
  1. II. Utilisation du DOM
    1. Objets, méthodes et propriétés
      1. Accéder aux fichiers XML et XSL
      2. Sélection des éléments dans un fichier XML
    2. Mise à jour de l'affichage
    3. Exemple
      1. Exercice : Manipulation dynamique de la feuille de style XSL

Retour au menu

Contenu du cours

I. Insertion de code JavaScript dans une page

1. Introduction

XSLT permet de créer, entre autres, des pages HTML. On peut désirer que ces pages puissent être dotées d'un comportement dynamique ; cela est réalisable via l'insertion de code JavaScript. Mais un certain nombre de précautions doivent être prises afin d'éviter l'interprétation du code ainsi inséré. Deux approches, à ce niveau, sont possibles. La première consiste à écrire le code JavaScript destiné à la manipulation du code HTML, ainsi que nous l'avons fait en DHTML. Le côté "dynamique" est donc déporté sur la gestion du document HTML créé. La seconde méthode, que nous allons explorer dans ce cours, consiste à incorporer un code JavaScript permettant de modifier la feuille de style XSL elle-même. Cette méthode, rendue obsolète par les progrès de la standardisation et de l'accès au DOM par les navigateurs, est implémentée via une interface propriétaire sous Internet Explorer 6.

>Retour à la TdM

2. Insertion de code

Un code JavaScript, en effet, peut contenir un certain nombre de caractères < ou >, qui risquent d'être interprétés par un parser XSL. Le code doit donc être inséré dans un élément XML non interprété. Cela donne ainsi l'exemple suivant :

<script type="text/javascript"> <![CDATA[(Emplacement du code)]]> </script>

Il est alors possible d'écrire le code JavaScript (ou autre...) sans se soucier d'éventuelles incompatibilités de syntaxe.

>Retour à la TdM

II. Utilisation du DOM

1. Objets, méthodes et propriétés

a. Accéder aux fichiers XML et XSL

Avant toute chose, il faut être en mesure de pouvoir lire les fichiers sources XML et XSL. Pour cela, on utilise deux collections, document.XMLDocument et document.XSLDocument :

var XMLsource = new Object ;
var XSLsource = new Object ;
XMLsource = document.XMLDocument ;
XSLsource = document.XSLDocument ;

b. Sélection des éléments dans un fichier XML

Une fois que le fichier XML est déclaré, il faut pouvoir accéder à ses différents éléments. Cela est réalisé par un appel à la méthode selectNodes(), qui prend comme argument une expression XPath, appliquée à la collection documentElement de l'objet précédemment défini.

XMLsource.documentElement.selectNodes(livre/auteur/@nom) ;

On peut également modifier un élément de la feuille XSL 

collection_element=XSLsource.documentElement.selectNodes("xsl:for-each[@select='livre']") ;
element=collection_element[0] ;
element.setAttribute("select", auteur/@nom)

>Retour à la TdM

2. Mise à jour de l'affichage

Il est nécessaire, pour terminer, de mettre à jour l'afichage avec les modifications désirées. Cela est réalisé en utilisant la propriété innerHTML de l'objet document.body, et lui affectant le résultat de la transformation de l'objet XML par l'objet XSL modifié :

document.body.innerHTML = XMLsource.transformNode(XSLsource) ;

>Retour à la TdM

3. Exemple

Consulter l'exemple de tri sur la collection de nuages (source et feuille de style).

Exercice 1. Manipulation dynamique de la feuille de style XSL

Énoncé
Correction (partie 1)
Correction (partie 2)

>Retour à la TdM

Historique de ce document

Bibliographie

De l'auteur (G. Chagnon)

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu