自动生成Xpath
点击元素自动生成Xpath自动生成带属性的Xpath
油猴脚本
// ==UserScript==
// @name XPATHJS
// @namespace *
// @version 0.1
// @description try to take over the world!
// @author You
// @include *
// @grant none
// @require https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
// @run-at document-start
// ==/UserScript==
console.log('qwe')
console.log($);
(function() {
function readXPath(element){
if (element.getAttribute("class")!==null){ //判断class属性,如果这个元素有class,则显 示//*[@class="xPath"] 形式内容
return '//*[@class=\"'+element.getAttribute("class")+'\"]';
}
//因为Xpath属性不止id和class,所以还可以更具class形式添加属性
//这里需要需要主要字符串转译问题,可参考js 动态生成html时字符串和变量转译(注意引号的作用)
if (element==document.body){//递归到body处,结束递归
return '/html/'+element.tagName;
}
var ix= 0,//在nodelist中的位置,且每次点击初始化
siblings= element.parentNode.childNodes;//同级的子元素
for (var i= 0,l=siblings.length; i<l; i++) {
var sibling= siblings[i];
if (sibling==element){//如果这个元素是siblings数组中的元素,则执行递归操作
return arguments.callee(element.parentNode)+'/'+element.tagName+((ix+1)==1?'':'['+(ix+1)+']');//ix+1是因为xpath是从1开始计数的,element.tagName+((ix+1)==1?'':'['+(ix+1)+']')三元运算符,如果是第一个则不显示,从2开始显示
}else if(sibling.nodeType==1 && sibling.tagName==element.tagName){//如果不符合,判断是否是element元素,并且是否是相同元素,如果是相同的就开始累加
ix++;
}
}
}
$(document).ready(function () {
var xpath = '', o;
$('*').click(function (e) {
e.stopPropagation();//停止冒泡
o = this;
alert(readXPath(o));
});
});
// Your code here...
})();