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>