XPath (XML Path Language) est un langage d'expressions permettant de sélectionner des nœuds dans un document XML ou HTML.
Tests
Banc d'essai XPath
Testez et expérimentez avec des expressions XPath de manière interactive :
- XPath Testbed (whitebeam.org)
Console du navigateur
$x("//div")
Disponible directement dans les consoles DevTools de Chrome, Edge et Firefox.
Sélecteurs
Sélecteurs de descendants
| CSS | XPath | Référence |
|---|---|---|
h1 |
//h1 |
? |
div p |
//div//p |
? |
ul > li |
//ul/li |
? |
ul > li > a |
//ul/li/a |
|
div > * |
//div/* |
|
:root |
/ |
? |
:root > body |
/body |
Sélecteurs d'attributs
| CSS | XPath | Référence |
|---|---|---|
#id |
//*[@id="id"] |
? |
.class |
//*[@class="class"] |
? |
input[type="submit"] |
//input[@type="submit"] |
|
a#abc[for="xyz"] |
//a[@id="abc"][@for="xyz"] |
? |
a[rel] |
//a[@rel] |
|
a[href^='/'] |
//a[starts-with(@href, '/')] |
? |
a[href$='pdf'] |
//a[ends-with(@href, '.pdf')] |
|
a[href*='://'] |
//a[contains(@href, '://')] |
|
a[rel~='help'] |
//a[contains(@rel, 'help')] |
? |
Sélecteurs d'ordre et d'index
| CSS | XPath | Référence |
|---|---|---|
ul > li:first-of-type |
//ul/li[1] |
? |
ul > li:nth-of-type(2) |
//ul/li[2] |
|
ul > li:last-of-type |
//ul/li[last()] |
|
li#id:first-of-type |
//li[1][@id="id"] |
? |
a:first-child |
//*[1][name()="a"] |
|
a:last-child |
//*[last()][name()="a"] |
Éléments frères
| CSS | XPath | Référence |
|---|---|---|
h1 ~ ul |
//h1/following-sibling::ul |
? |
h1 + ul |
//h1/following-sibling::ul[1] |
|
h1 ~ #id |
//h1/following-sibling::*[@id="id"] |
Équivalents jQuery
| jQuery | XPath | Référence |
|---|---|---|
$('ul > li').parent() |
//ul/li/.. |
? |
$('li').closest('section') |
//li/ancestor-or-self::section |
|
$('a').attr('href') |
//a/@href |
? |
$('span').text() |
//span/text() |
Conditions et logique
| Condition | XPath | Référence |
|---|---|---|
h1:not([id]) |
//h1[not(@id)] |
? |
| Correspondance exacte de texte | //button[text()="Submit"] |
? |
| Correspondance partielle de texte | //button[contains(text(),"Go")] |
|
| Condition arithmétique | //product[@price > 2.50] |
|
| Possède un élément enfant quelconque | //ul[*] |
|
| Possède un élément enfant spécifique | //ul[li] |
|
| Logique 'OR' | //a[@name or @href] |
? |
| Union (fusionner des ensembles) | //a | //div |
? |
Vérification de classe
//div[contains(concat(' ',normalize-space(@class),' '),' foobar ')]
XPath 1.0 ne dispose pas d'opérateur pour les jetons séparés par des espaces ; cette astuce standard compare les classes entières de manière sûre.
Expressions
Étapes et axes
Anatomie d'une expression :
// |
ul |
/ |
a[@id='link'] |
|---|---|---|---|
| Axe | Étape | Axe | Étape |
Préfixes
| Préfixe | Exemple | Signification |
|---|---|---|
// |
//hr[@class='edge'] |
N'importe où dans le document |
./ |
./a |
Relatif au contexte actuel |
/ |
/html/body/div |
Depuis l'élément racine |
Les expressions peuvent commencer par n'importe lequel de ces préfixes.
Axes
| Axe | Exemple | Signification |
|---|---|---|
/ |
//ul/li/a |
Nœud enfant immédiat |
// |
//*[@id="list"]//a |
Tout nœud descendant |
Les étapes sont séparées par /. Utilisez // pour cibler n'importe quel niveau de descendants.
Étapes
//div
//div[@name='box']
//*[@id='link']
Les étapes peuvent contenir des noms de balises et des prédicats ([...]). Les deux sont optionnels. Elles peuvent aussi cibler des valeurs de nœuds :
//a/text() #=> "Go home"
//a/@href #=> "index.html"
//a/* #=> All children of <a>
Prédicats
Prédicats
//div[true()]
//div[@class="head"]
//div[@class="head"][@id="top"]
Filtre les ensembles de nœuds lorsque les conditions correspondent. Les prédicats peuvent être enchaînés consécutivement.
Opérateurs
# Comparison
//a[@id = "xyz"]
//a[@id != "xyz"]
//a[@price > 25]
# Logic (and/or)
//div[@id="head" and position()=2]
//div[(x and y) or not(z)]
Utilisation de nœuds dans les prédicats
# Inside functions
//ul[count(li) > 2]
//ul[count(li[@class='hide']) > 0]
# Returns <ul> only if it has an <li> child
//ul[li]
Indexation
//a[1] # First <a> (1-based index)
//a[last()] # Last <a>
//ol/li[2] # Second <li>
//ol/li[position()=2] # Same as above
//ol/li[position()>1] # All except the first
Ordre enchaîné
a[1][@href='/']
a[@href='/'][1]
L'ordre compte : le premier prend l'élément 1 et vérifie son href ; le second filtre d'abord par href puis prend le premier résultat.
Prédicats imbriqués
//section[.//h1[@id='hi']]
Renvoie les éléments <section> contenant un descendant <h1> avec id='hi'.
Fonctions
Fonctions de nœuds
name() # Starts with: //[starts-with(name(), 'h')]
text() # Exact match: //button[text()="Submit"]
# Value: //button/text()
lang(str)
namespace-uri()
count() # //table[count(tr)=1]
position() # //ol/li[position()=2]
Fonctions booléennes
not(expr) # //button[not(starts-with(text(),"Submit"))]
Fonctions sur les chaînes
contains() # //span[contains(@class,"head")]
starts-with() # //span[starts-with(@class,"head")]
ends-with() # //span[ends-with(@class,"head")]
concat(x, y)
substring(str, start, len)
substring-before("01/02", "/") #=> "01"
substring-after("01/02", "/") #=> "02"
translate()
normalize-space()
string-length()
Conversion de types
string()
number()
boolean()
Axes
Utilisation des axes
//ul/li # ul > li
//ul/child::li # ul > li (explicit child axis)
//ul/following-sibling::li # ul ~ li
//ul/descendant-or-self::li # ul li
//ul/ancestor-or-self::li # $('ul').closest('li')
Syntaxe des axes :
// |
ul |
/child:: |
li |
|---|---|---|---|
| Axe | Étape | Axe | Étape |
Autres axes
| Axe | Raccourci | Description |
|---|---|---|
ancestor |
Éléments ancêtres | |
ancestor-or-self |
Nœud courant et ses ancêtres | |
attribute |
@ |
@href est le raccourci pour attribute::href |
child |
Axe par défaut : div équivaut à child::div |
|
descendant |
Descendants | |
descendant-or-self |
// |
// est le raccourci pour /descendant-or-self::node()/ |
namespace |
Nœuds d'espace de noms | |
self |
. |
. est le raccourci pour self::node() |
parent |
.. |
.. est le raccourci pour parent::node() |
following |
Tout ce qui suit la balise fermante | |
following-sibling |
Nœuds frères après le nœud courant | |
preceding |
Tout ce qui précède la balise ouvrante | |
preceding-sibling |
Nœuds frères avant le nœud courant |
Unions
//a | //span
Utilisez | pour fusionner deux ensembles de nœuds ou plus en une union.
Exemples
Modèles de requête courants
//* # All elements
count(//*) # Count all elements
(//h1)[1]/text() # Text of the very first h1 heading in document
//li[span] # Find <li> containing a <span> child
//ul/li/.. # Navigate back to parent <ul>
Trouver des éléments parents
//section[h1[@id='section-name']]
Trouve un <section> contenant un enfant direct h1#section-name.
//section[.//h1[@id='section-name']]
Trouve un <section> contenant n'importe quel descendant h1#section-name.