« »
12/20/2008

Retrouver le chemin XPath d'un élément html via Javascript

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.

« »
 
 
Made with on a hot august night from an airplane the 19th of March 2017.