Create XPath expression programmatically

问题

Is it possible to generate the most specific XPath expression automatically from the position of the cursor on the web page? The XPath expression would change with "onMouseMove event".

If it's possible, how would you implement it? Or is it already implemented in some Javascript or Python library? I would prefer it in Python with a combination of some web library but Javascript would be good and acceptable too.

回答1:

See the Get XPath thread in DZone Snippets for finding the XPath. See the How do I check if the mouse is over an element in jQuery? question here for identifying when the mouse cursor is over an element.

回答2:

I have answered an almost identical question (using jQuery) at Return XPath location with jQuery? Need some feedback on a function

If you change the click event to mouseenter you would have what you ask for..

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

Demo at http://jsfiddle.net/gaby/hsv97/25/

Update with no jQuery used.. (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;
}

Demo at http://jsfiddle.net/gaby/hsv97/29/

回答3:

vanilla javascript (with indices) 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();
}

来源：https://stackoverflow.com/questions/9119818/create-xpath-expression-programmatically

标签

javascript

python

xpath