Utilisation des commandes following-sibling, preceding-sibling, parent & child

Version imprimable

Avec cet exemple de code HTML
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <form action="/signup.php" class="signup" method="post"> <div class="field"> <input type="text" class="text-input" autocomplete="off" name="user[name]" maxlength="20" placeholder="Nom complet"> </div> <div class="field"> <input type="text" class="text-input email-input" autocomplete="off" name="user[email]" placeholder="Email"> </div> <div class="field"> <input type="password" class="text-input" name="user[user_password]" placeholder="Mot de passe"> </div> <button type="submit" class="btn signup-btn"> S'inscrire </button> </form>
je voudrais déterminer, via des requêtes XPath, pour chaque champ de type <input> le voisin de gauche, de droite, celui au dessus et celui en dessous.
L'idée étant que je voudrais déterminer/trouver un champ par rapport à son voisinage.

Pour ce faire, je pense que cela doit être possible avec les commandes XPath suivantes :

voisin de droite (to-right-of) : following-sibling
voisin de gauche (to-left-of) : preceding-sibling
au dessus (above) : parent
en dessous (below ) : child

De ce que je j'ai pu glaner sur la toile, cela n'est pas très explicite sur l'utilisation de ces commandes.
Bref je ne vois pas comment utiliser correctement ces commandes.

Merci de votre aide.

03/01/2014, 19h31
tsuji

Browsers qui supportent dom supportent plupart ou tout le dom noyeau 1. Dans dom noyau - Node interface, vous avez propriétés publiques : parentNode (vous diriez au desus), previousSibling (vous diriez voisin de gauche), childNodes (vous diriez déscendants, mais pas), nextSibling (vous diriez voisin de droite). Ils ont normalement leur contre-partie de méthode propriétaire aussi (getParentNode() etc...). Cheque browser a son rendrement spécifique qui n'est pas forcément la même que les autres. Ce sont parfois un problème très grave pour les utilisateurs.

Dom noyau 1 :
http://www.w3.org/TR/REC-DOM-Level-1...-one-core.html
Regardez la section "Interface Node" en particulier.

Tout ça, c'est très bien; mais ce n'est pas XPath. Et là, le support n'est loins d'être normalisé pour des raisons probablement politiques malheureuses. C'est pour ça, il y des bibliothèques/frameworks qui essayent porter de remède.

Un récent avancement sur le support uniformisé parmi d'autres sur les browsers est celui de xpathjs d'Andrej Pavlovic.
https://github.com/andrejpavlovic/xpathjs
Avec ça, vous pouvez profiter le plein support de xpath. Je l'ai testé un peu, et il semble bien performant.

Voilà un peu d'éléments pour un sujet vaste si vous ne portez aucune spécificité desus.
04/01/2014, 07h57
lemoussel

Je vous remercie de votre éclairage sur ces différents aspects relatifs à XPath.

J'utilise Chrome comme navigateur. Ce navigateur supportant parfaitement la syntaxe XPath 1.0. Il est aussi a remarquer que Chrome supporte les requêtes XPath dans la console JavaScript avec la syntaxe

Code:

$x("Requete XPath")

Le plus difficile étant d'écrire les requêtes XPath d'ou ma question.

Si vous voulez expérimenter xpath avec Chrome javascript console, ça va et c'est aussi éducatif : profitez-le.

Puisque la structure de l'input de la forme est elle-même un peu pauvre : elle ne peut y avoir de déscendant, et la structure de sibling n'est presque rien, je propose de mettre un peu de plus autour de la première input pourque vous voulez les retournes un peu plus riche.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="/signup.php" class="signup" method="post">
    <div class="field">
        <div>first input</div>
        <div>some description</div>
        <input type="text" class="text-input" autocomplete="off" name="user[name]" maxlength="20" placeholder="Nom complet">
        <p>some paragraph</p>
    </div>
    <div class="field">
        <input type="text" class="text-input email-input" autocomplete="off" name="user[email]" placeholder="Email">
    </div>
    <div class="field">
        <input type="password" class="text-input" name="user[user_password]" placeholder="Mot de passe">
    </div>
    <button type="submit" class="btn signup-btn">
        S'inscrire
    </button>
</form>

Vous pouvez expérimenter les xpath's typiques comme ça.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$x('//form/input/parent::*')
$x('//form/input/preceding-sibling::*')
$x('//form/input/following-sibling::*')
$x('//form/input/preceding-sibling::text()')
$x('//form/input/descendant::*')
$x('//form/input/ancestor::*')
$x('//form/input/ancestor::*')
$x('//form/input/preceding::*')
$x('//form/input/following::*')
 
$x('(//form/input)[1]/parent::*')
$x('(//form/input)[1]/preceding-sibling::*')
$x('(//form/input)[1]/following-sibling::*')
$x('(//form/input)[1]/preceding-sibling::text()')
$x('(//form/input)[1]/ancestor::*')
$x('(//form/input)[1]/preceding::*')
$x('(//form/input)[1]/following::*')

etc etc...

04/01/2014, 14h28
lemoussel

tsuji, pour plus de complexité je te propose de tester/m'expliquer avec la page Yahoo Finance suivante : http://finance.yahoo.com/q?s=EURUSD=X

Avec tes exemples nous obtenons :

pour le texte EUR/USD (EURUSD=X) le voisin de droite (to-right-of) = "CCY"

Code:

.//h2[text()="EUR/USD (EURUSD=X)"]/following-sibling::*[1]

pour le texte "CCY" le voisin de gauche (to-left-of) = "EUR/USD (EURUSD=X)"

Code:

.//span[text()="CCY "]/preceding-sibling::*[1]

Pour le texte "1.3588" au dessus (above) = "EUR/USD (EURUSD=X)"

Code:

Pas réussi à trouver la requête XPath correspondante.

Pour le texte "EUR/USD (EURUSD=X)" en dessous (below ) = "1.3588"

Code:

Pas réussi à trouver la requête XPath correspondante.
04/01/2014, 16h40
tsuji

J'ai jeté un coup d'oeil du page...

Citation:

Pour le texte "1.3588" au dessus (above) = "EUR/USD (EURUSD=X)"

Ceci devrait résulter ce qu'on cherche.

Code:

$x('//span[normalize-space()="1.3588"]/ancestor::div[1]/preceding-sibling::div[1]/div/h2')

Citation:

Pour le texte "EUR/USD (EURUSD=X)" en dessous (below ) = "1.3588"

Code:

$x('//h2[normalize-space()="EUR/USD (EURUSD=X)"]/ancestor::div[@class="hd"][1]/following-sibling::div[1]/descendant::span[@id="yfs_l10_eurusd=x"]')

Je ne fais pas exacte mirroir inverse l'une par rapport à l'autre pour illustrer le fait que le xpath n'est jamais unique en écriture dictée par je ne sais pas quelle loi, non, on peut l'écrire d'après les infos qu'on possède.
04/01/2014, 17h47
lemoussel

Merci de ces exemples, Fort éducatif.

Pense tu qu'il soit possible de rendre ces requêtes XPATH plus génériques ?
c'est à dire de dépendre le moins possible des balises
comme par exemple

Code:

$x('//span[normalize-space()="1.3588"]/ancestor::*/preceding-sibling::*/text()')

Rem : la requête ci-dessus ne donne pas le bon résultat.
Ce n'est pas grave si la requête retourne plusieurs éléments. L'essentiel est que la valeur attendue soit en première position car le résultat est analysé dans un Prg C# qui prend la première valeur.
05/01/2014, 08h07
tsuji
Il est tout à fait légit de concevoir la requête xpath qui soit la plus générique possible. Mais, c'est relative. Générique ici prend le sens que les paramètres réferenciés soient moins susceptibles de changer en temps aussi longtemps que la page ne soit pas renouvellé en sa conception entière.

Par exemple, le point de départ avec 1.3588 ne serait jamais considéré générique pour une page dynamique parce que la valeur d'échange monétaire varie.

Je me permets d'avancer id="yfi_rt_quote_summary" est plus générique et que class="time_rtq_ticker" et class="title" aussi mais du degré moins parce que les derniers sont liés au css qui est plus susceptible à changer dans le temps. En tout cas, les requêtes comme ça sont plus génériques.
Code:

1 2 3 $x('//div[@id="yfi_rt_quote_summary"]//div[@class="title"]/h2') $x('//div[@id="yfi_rt_quote_summary"]//div[@class="yfi_rt_quote_summary_rt_top"]//span[@class="time_rtq_ticker"]/span')