首页 > 代码库 > 获取html元素的XPath路径

获取html元素的XPath路径

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script>
 7 
 8  function readXPath(element) {
 9     if (element.id! == ""){//判断id属性,如果这个元素有id,则显 示//*[@id="xPath"]  形式内容
10         return //*[@id=\"+element.id+\"];
11     }
12 
13     if (element.getAttribute("class")! == null){ //判断class属性,如果这个元素有class,则显 示//*[@class="xPath"]  形式内容
14         return //*[@class=\"+element.getAttribute("class")+\"];
15     }
16     //因为Xpath属性不止id和class,所以还可以更具class形式添加属性
17 
18     //这里需要需要主要字符串转译问题
19 
20 
21     if (element == document.body){//递归到body处,结束递归
22         return /html/+element.tagName.toLowerCase();
23     }
24 
26     var ix= 0,//在nodelist中的位置,且每次点击初始化
27           siblings= element.parentNode.childNodes;//同级的子元素
28 
29     for (var i= 0,l=siblings.length; i<l; i++) {
30         var sibling = siblings[i];
31         if (sibling == element){//如果这个元素是siblings数组中的元素,则执行递归操作
32             return arguments.callee(element.parentNode)+/+element.tagName.toLowerCase()+((ix+1)==1?‘‘:[+(ix+1)+]);//ix+1是因为xpath是从1开始计数的,element.tagName+((ix+1)==1?‘‘:‘[‘+(ix+1)+‘]‘)三元运算符,如果是第一个则不显示,从2开始显示
33         }else if(sibling.nodeType == 1 && sibling.tagName == element.tagName){//如果不符合,判断是否是element元素,并且是否是相同元素,如果是相同的就开始累加
34             ix++;
35         }
36     }
37 };
38 
39 $(document).ready(function () {
40     var xpath = ‘‘, o;
41     $(*).click(function (e) {
42         e.stopPropagation();//停止冒泡
43         o = this;
44         alert(readXPath(o));
45     });
46 });
47 
48 </script>
49 </head>
50 <body>
51 <p>如果您点击我,我会消失。</p>
52 <p>点击我,我会消失。</p>
53 <p>也要点击我哦。</p>
54 </body>
55 </html>

 

获取html元素的XPath路径