以编程方式创建 XPath 表达式答案

【问题标题】：Create XPath expression programmatically以编程方式创建 XPath 表达式
【发布时间】：2012-02-02 20:50:17
【问题描述】：

是否可以从网页上的光标位置自动生成最具体的 XPath 表达式？ XPath 表达式会随着“onMouseMove 事件”而改变。

如果可能，您将如何实施？或者它是否已经在某些Javascript 或Python 库中实现？我更喜欢 Python 和一些网络库的组合，但 Javascript 也很好并且可以接受。

【问题讨论】：

您是指右键单击元素并在检查器中获取 html 元素时的“Google chrome”功能吗？
你的意思是像萤火虫功能来获取xpath。
Return XPath location with jQuery? Need some feedback on a function 的可能重复项
@RanRag 是的，没错，我不知道 firebug 有这个功能。
没有“最具体的 xpath 语句”这样的东西。为了更具体，它将对整个文档进行编码。 /*[1]/*[3]/*[5]/*[2] 之类的路径是否比 /html/body/div[3]/em“更具体”？你如何衡量“特异性”？

【解决方案1】：

请参阅 DZone Snippets 中的 Get XPath 线程以查找 XPath。请参阅此处的How do I check if the mouse is over an element in jQuery? 问题以识别鼠标光标何时位于元素上方。

【讨论】：

谢谢。这真的很有帮助，只有JQuery 部分在Javascript 中会更好，但我可以在另一个问题中要求检查鼠标位置。
JQuery 只是一个 javascript 函数库，在底层它都是 javascript。见jquery.com。它对很多事情都很有用，并且兼容跨浏览器。
我知道，但语法很高级。
没错，它最初并不熟悉，并且会涉及一些学习曲线，但就像任何好的工具一样，一旦您通过并开始使用它，它就会为您节省很多时间。幸运的是，它的文档非常好。我发现学习它真的很值得，一旦这里的其他开发人员看到我可以用它做什么，他们也被迷住了。

【解决方案2】：

我在Return XPath location with jQuery? Need some feedback on a function

回答了一个几乎相同的问题（使用 jQuery）

如果您将click 事件更改为mouseenter，您将得到您想要的......

$(document).delegate('*','mouseenter',function(){
    var path = $(this).parents().andSelf();
    var xpath='/';
    for (var i = 0; i < path.length; i++)
    {
        var nd = path[i].nodeName.toLowerCase();
        xpath += '/';
        if (nd != 'html' && nd != 'body')
        {
            xpath += nd;
            if (path[i].id != '')
            {
                xpath += '#' + path[i].id;
            }
            else
            {
                xpath += '['+ ($(path[i-1]).children().index(path[i])+1) +']';
            }
            if (path[i].className != '')
                xpath += '.' + path[i].className;
        }
        else
        {xpath += nd;}                    
    }
    $('#xpath').html(xpath); // show the xpath in an element with id xpath..
    return false;
});

演示地址 http://jsfiddle.net/gaby/hsv97/25/

更新时不使用 jQuery..（适用于现代浏览器）

function getXpath(event){
    var hierarchy = [],
        current = event.srcElement||event.originalTarget;
    while (current.parentNode){
        hierarchy.unshift(current);
        current = current.parentNode;
    }
    var xPath = hierarchy.map(function(el,i){
            return el.nodeName.toLowerCase() + ((el.id !== '') ? '#'+el.id : '') + ((el.className !== '') ? '.'+el.className.split(' ').join('.') : '');
        }).join('/');
    document.getElementById('xpath').innerHTML = xPath;
    return xPath;
}

if (document.addEventListener){
    document.addEventListener('mouseover', getXpath, false);
} else {
    document.onmouseover = getXpath;
}

演示地址 http://jsfiddle.net/gaby/hsv97/29/

【讨论】：

谢谢你，我很感激，但JQuery还不是我的技能所以不明白。
谢谢。我已经接受了詹姆斯更快的回答，但你似乎和他一样好。
@GabyakaG.Petrioli 你的香草版本无效，没有索引。我的版本：jsfiddle.net/nycu2/1

【解决方案3】：

vanilla javascript（带索引）http://jsfiddle.net/nycu2/1/

function nodeindex(element, array) {
    var i,
        found = -1,
        element_name = element.nodeName.toLowerCase(),
        matched
       ;

    for (i = 0; i != array.length; ++i) {
        matched = array[i];
        if (matched.nodeName.toLowerCase() === element_name) {
            ++found;


        if (matched === element) {
            return found;
        }
        }
    }

    return -1;
}

function xpath(element, suffix) {
    var parent, child_index, node_name;

    parent = element.parentElement;

    if (parent) {
        node_name = element.nodeName.toLowerCase();
        child_index = nodeindex(element, parent.children) + 1;
        return xpath(parent, '/' + node_name + '[' + child_index + ']' + suffix);
    } else {
        return '//html[1]' + suffix;
    }
}

function xpathstring(event) {
    var
    e = event.srcElement || event.originalTarget,
        path = xpath(e, '');;

    document.querySelector('.xpathresult').value = path;

    highlight();
}

【讨论】：