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

 

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值