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>
时间： 2024-08-29 19:44:55