转载：Javascript获取html元素的XPath路径（选择器）

Javascript获取html元素的XPath路径（选择器）

XPath 是一门在 XML 文档中查找信息的语言，是一个功能强大的选择器。

如果后台需要

XPath路径采集结构化数据，我们如何从浏览器端获得所需元素路径？

function readXPath(element) {
    if (element.id!==""){//判断id属性，如果这个元素有id，则显 示//*[@id="xPath"]  形式内容
        return '//*[@id=\"'+element.id+'\"]';
    }

    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++;
        }
    }
};

实例中使用：

<h1>无</h1>
<div>
    <div>
        <p>无ID和class</p>
        <p>无ID和class2</p>
        <p id="xpath1">id</p>
    </div>
    <div>无</div>
    <div>
        <div class="xpath2">class</div>
    </div>
</div>

用jquery写的，当鼠标点击一个元素时，显示元素的xpath路径

$(document).ready(function () {
    var xpath = '', o;
    $('*').click(function (e) {
        e.stopPropagation();//停止冒泡
        o = this;
        alert(readXPath(o));
    });
});