获取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>

 

posted on 2017-03-31 15:12  帅胡  阅读(2976)  评论(0)    收藏  举报

导航