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形式新增屬性

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