以编程方式创建XPath表达式

Question

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

如果可能，您将如何实现？或者它已经在某些Javascript或Python库中实现了吗？我更喜欢使用Python与某些Web库的组合，但Javascript也是可以接受的。

- xralf

---

你的意思是像“Google Chrome”一样，在元素上右键单击并在检查器中获取它的HTML元素功能吗？ - Andreas Helgegren

@xralf：我的评论是否回答了你的问题。 - RanRag

没有所谓的“最具体的xpath语句”。为了最具体，它将编码整个文档。像 /*[1]/*[3]/*[5]/*[2] 这样的路径比 /html/body/div[3]/em 更“具体”吗？你如何衡量“具体性”？ - Has QUIT--Anony-Mousse

@GabyakaG.Petrioli JQuery 是一个我现在没有时间学习的库，所以我更喜欢使用 Javascript 或 Python，这会有所不同，因为我需要学习 JQuery 的语法特点。 - xralf

@Anony-Mousse 这是一个很好的评论。我希望它能够被理解，但你是对的，可以提供更具体的陈述。最具体指的是每个标识最嵌套元素（没有其他子元素）且无歧义的语句（=无法使用此XPath表达式标识两个元素）。 - xralf

Answer 1

我曾经回答过一个几乎相同的问题（使用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/

- Gabriele Petrioli

---

谢谢，我很感激，但是JQuery还不在我的技能范围内，所以我不理解它。 - xralf

谢谢。我已经接受了James更快的答案，但是你的答案看起来和他的一样好。 - xralf

@GabyakaG.Petrioli，你的原始版本无效，没有索引。我的版本：http://jsfiddle.net/nycu2/1/ - slf

Answer 2

在DZone Snippets中查找XPath，请参见获取XPath线程。要识别鼠标光标是否悬停在元素上，请参见此处的jQuery中如何检查鼠标是否悬停在元素上的问题。

- JamieSee

---

谢谢。这真的很有帮助，只是 JQuery 部分最好用 Javascript，但我可以在另一个问题中询问如何检查鼠标位置。 - xralf

JQuery只是一组JavaScript函数库，底层都是JavaScript。请参阅http://www.jquery.com/。它对于许多事情非常有用，并且可以跨浏览器兼容。 - JamieSee

我知道，但是语法相当高级。 - xralf

没错，一开始可能会有点陌生，需要一些学习曲线，但像任何好的工具一样，一旦你掌握了它并开始使用，它会为你节省很多时间。幸运的是，它的文档相当不错。我发现学习它真的很值得，而且一旦这里的其他开发人员看到我用它能做什么，他们也会着迷。 - JamieSee

Answer 3

使用原生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();
}

- slf