首页 > 代码库 > 获取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路径
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。