Je développe depuis quelques heures un module web permettant de "monitorer" de manière générique les mouvements et actions d'un visiteur. L'objectif est de reproduire en temps réel via XMPP toutes ces actions dans un autre navigateur (donc DOM différent).

Je devais donc trouver un moyen d'identifier un élément de manière unique sur une page, puis de transférer cet "ID" au navigateur - de l'administrateur par exemple - afin que le module reproduise l'événement.

Il y a 2 ans (déjà!) j'avais développé une fonction permettant de trouver le chemin XPath d'un élément html. Voici une variation afin de trouver un possible sélecteur jQuery pour un unique élément HTML donné (et non à partir d'un $('a.className') car dans ce cas, le selector est simplement un attribut de l'objet jQuery: $('a.className').selector).

Après de nombreuses recherches mais en vain, j'ai décidé de coder cette fonction qui permet de retourner le chemin XPath d'un élément html.

//@el élément HTML
function getXpath(el){

XPath = '/'+el.nodeName
+ (el.id?'[@id=\''+ el.id +'\']':(el.className?'[@class=\''+ el.className+'\']':''));

while(el.parentNode && el.parentNode.nodeName !== '#document')//on monte d'un élément à chaque itération
{
el = el.parentNode;
XPath = '/'
+ el.nodeName
+ (el.id?'[@id=\''+ el.id +'\']':(el.className?'[@class=\''+ el.className+'\']':''))
+ XPath;
}

return XPath.toLowerCase();
}

Si vous souhaitez retourner uniquement le chemin XPath de l'élément père, il suffit de remplacer cette ligne :

XPath = '/'+el.nodeName
+ (el.id?'[@id=\''+ el.id +'\']':(el.className?'[@class=\''+ el.className+'\']':''));

Par :

XPath = '';

 

Exemple d'utilisation pour une div ayant une valorisation de l'ID à post-845 :

alert(getXpath(document.getElementById('post-845')));
//retourne par exemple : /html/body/div/div[@id='page']/div[@id='content']/div[@id='post-845']

Testé sous Firefox 3, Chrome, IE7, IE8. Tout les chemins retournés jusqu'à présent ont été valide mais il est possible d'affiner la précision en spécifiant l'index de l'élément. C'est utile lorsque, par exemple, il existe plusieurs éléments enfants de même type pour un unique élément parent.