自动生成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...
})();