1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: Utilisation de XPath
slug: Utilisation_de_XPath
tags:
- AJAX
- DOM
- Extensions
- Transformations_XML_avec_XSLT
- XML
- XPath
- XSLT
translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript
translation_of_original: Using_XPath
---
<p> </p>
<p><a href="/fr/XPath" title="fr/XPath">XPath</a> est un langage de conversion des éléments d'un document XML. C'est une <a class="external" href="http://www.w3.org/TR/xpath">recommandation du W3C (en)</a>.</p>
<p>Cet article décrit les interfaces de Mozilla qui exposent les fonctionnalités <a href="/fr/XPath" title="fr/XPath">XPath</a> au code JavaScript. Elles sont décrites dans <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath (en)</a> (qui est une note du groupe de travail du W3C pour le moment).</p>
<p>Cet article n'a pas vocation à enseigner XPath. Si vous n'êtes pas familier avec cette technologie, veuillez vous référer au <a class="external" href="http://www.w3schools.com/xpath/">tutoriel XPath de W3Schools (en)</a>.</p>
<h3 id="Fonction_Wrapper">Fonction Wrapper</h3>
<p>La fonction suivante peut être utilisée pour évaluer des expressions XPath de nœuds XML donnés. Le premier argument est un nœud DOM ou un objet de Document, le second est une chaîne définissant l'expression XPath.</p>
<pre class="eval">// Évalue une expression XPath aExpression par rapport à un nœud DOM donné
// ou un objet de document (aNode), puis retourne les résultats en table
// Merci à wanderingstan at morethanwarm dot mail dot com pour le
// travail initial.
function evaluateXPath(aNode, aExpr) {
var xpe = new XPathEvaluator();
var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ?
aNode.documentElement : aNode.ownerDocument.documentElement);
var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null);
var found = [];
var res;
while (res = result.iterateNext())
found.push(res);
return found;
}
</pre>
<p>Cette fonction utilise <code>new XPathEvaluator()</code>. Ce constructeur est spécifique à Mozilla. Les scripts utilisés dans des pages Web qui seront affichées par les différents navigateurs existant devraient remplacer l'appel à <code>new XPathEvaluator()</code> avec le fragment de code suivant :</p>
<pre class="eval"> // XPathEvaluator est implémenté sur les objets qui implémente Document
var xpe = aNode.ownerDocument || aNode;
</pre>
<p>Dans ce cas, la création de <a href="/fr/DOM/document.createNSResolver" title="fr/DOM/document.createNSResolver">XPathNSResolver</a> peut être simplifiée avec :</p>
<pre class="eval"> var nsResolver = xpe.createNSResolver(xpe.documentElement);
</pre>
<p>Notez cependant, que <code>createNSResolver</code> ne doit être utilisé que si vous êtes sûr que les préfixes de l'espace de noms correspondent à ceux du document « interrogé ». Autrement, vous devrez fournir votre propre implémentation de XPathNSResolver.</p>
<p>Si vous utilisez <a href="/fr/XMLHttpRequest" title="fr/XMLHttpRequest">XMLHttpRequest</a> pour un fichier XML local ou distant dans un arbre DOM (comme décrit dans <a href="/fr/Analyser_et_sérialiser_XML" title="fr/Analyser_et_sérialiser_XML">Analyser et sérialiser XML</a>), le premier argument de <code>evaluateXPath()</code> devrait être <code>req.responseXML</code>.</p>
<h3 id="Exemple_d.27utilisation">Exemple d'utilisation</h3>
<p>Supposons que l'on ait le document XML suivant (voir également <a href="/fr/Création_d'un_arbre_DOM" title="fr/Création_d'un_arbre_DOM">Création d'un arbre DOM</a> et <a href="/fr/Analyser_et_sérialiser_XML" title="fr/Analyser_et_sérialiser_XML">Analyser et sérialiser XML</a>):</p>
<pre class="eval"><?xml version="1.0"?>
<people>
<person first-name="eric" middle-initial="H" last-name="jung">
<address street="321 south st" city="denver" state="co" country="usa"/>
<address street="123 main st" city="arlington" state="ma" country="usa"/>
</person>
<person first-name="jed" last-name="brown">
<address street="321 north st" city="atlanta" state="ga" country="usa"/>
<address street="123 west st" city="seattle" state="wa" country="usa"/>
<address street="321 south avenue" city="denver" state="co" country="usa"/>
</person>
</people>
</pre>
<p>Vous pouvez « interroger » le document à l'aide d'expressions XPath. Bien que parcourir l'arbre DOM donnera des résultats similaires, l'utilisation d'expressions XPath est bien plus rapide et puissante. Si vous avez la possiblité d'utiliser des attributs <code>id</code>, <code>document.getElementById()</code> est encore puissant, mais toujours moins que XPath. Voici quelques exemples.</p>
<pre class="eval">// affiche le nom de famille de toutes les personnes du document
var results = evaluateXPath(people, "//person/@last-name");
for (var i in results)
alert("la nom de famille de la personne #" + i + "est" + results[i].value);
// recupère le nœud de la seconde personne
results = evaluateXPath(people, "/people/person[2]");
// récupère les nœuds de toutes les personnes vivant à Denver
results = evaluateXPath(people, "//person[address/@city='denver']");
// Récupère les adresses contenant "south" dans le nom de voie
results = evaluateXPath(people, "//address[contains(@street, 'south')]");
alert(results.length);
</pre>
<h3 id="Ressources">Ressources</h3>
<ul> <li><a href="/fr/XPath" title="fr/XPath">XPath</a></li> <li><a class="external" href="http://www.topxml.com/code/default.asp?p=3&id=v20021221025528">Visualiseur XPath pour Mozilla et Firefox (en)</a></li> <li><a class="external" href="http://www.w3schools.com/xpath/">Tutoriel XPath (en)</a></li> <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=229106">Forum de discussion sur l'utilisation de XPath (en)</a></li> <li><a class="external" href="http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html">Utiliser l'interface JavaScript de Mozilla avec XPath (en)</a> - brouillon d'un tutoriel sur l'utilisation de XPath avec JavaScript</li>
</ul>
<p><span>Interwiki Language Links</span></p>
<p> </p>
<p> </p>
<p>{{ languages( { "en": "en/Using_XPath", "ja": "ja/Using_XPath", "ko": "ko/Using_XPath", "zh-cn": "cn/Using_XPath" } ) }}</p>
|
