HervéRenault.fr

Mon aide-mémoire XPath

J'arrive à me souvenir de choses courantes comme //div//p/a[3] (la 3e ancre fille d'un paragraphe qui se trouve quelque part dans un div, lui-même situé quelque part dans le document) mais dès que je dois faire des choses un peu plus complexes… Donc j'écris ici des choses que j'ai (re)découvertes pour ne pas avoir à les re-redécouvrir plus tard 🤞

• Trouver un div qui possède la classe "foo" et uniquement cette classe : //div[@class = "foo"]
  La classe est un simple attribut, il n'y a pas de notation particulière comme en CSS avec .foo
• Trouver un div qui possède la classe "foo", entre autres : //div[contains(@class, "foo")]
• Trouver un div qui possède plusieurs classes : //div[contains(@class, "foo") and contains(@class, "bar")]
  Attention, si on a une classe foo mais aussi une classe foobar et une classe kungfoo qu'on veut distinguer, il faut "jouer" avec concat() pour chercher " foo ", c'est-à-dire utiliser concat(" ", @class, " ") au lieu de seulement @class
• Trouver un div qui a une ou plusieurs classes, peu importe lesquelles : //div[@class]
• Trouver un div qui possède la classe "foo" mais dont le texte ne contient pas "coucou" :
  //div[contains(@class, "foo") and not(contains(text(), "coucou"))]
• Ne pas confondre //div/span[3], le 3e span fils d'un div, avec (//div/span)[3], la 3e occurence d'une imbrication span dans div.
  
  Si on a ce code

  <div>
      <span>foo</span>
      <span>bar</span>
  </div>
  <div>
      <span>hello</span>
  </div>

  • //div/span[3] ne va rien trouver
  • (//div/span)[3] va trouver le span qui contient hello
• Trouver un div qui a au moins un fils de type span : //div[count(./span) > 0]
  C'est l'équivalent du sélecteur CSS div:has(span)
• J'ai aussi noté des choses concernant starts-with(), l'absence de ends-with() dans les navigateurs, et les axes tels que preceding-sibling:: dans mon aide-mémoire Exemple de XPath en JavaScript.

Le JS pour essayer ça

var itérateur = document.evaluate('...............', document);
var nœud = itérateur.iterateNext();
while (nœud) {
  console.log(nœud);
  nœud = itérateur.iterateNext();
}