Question

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

如果有可能，你会如何实现它？或者它是否已在某些Javascript或Python库中实施？我希望在Python中结合使用某些网络库，但Javascript会很好并且也可以接受。

Answer 1

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

Answer 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的更新..（ for modern browsers ）

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/

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

以编程方式创建XPath表达式

3 个答案: