6

我对编程很陌生，必须在单击 html 元素时生成 Xpath。例如：如果我点击了用户名的文本框，那么它应该给我 xpath 像 html/head/body/tr[1]/table[2]..... 等等等等。主要的是我不能使用 firebug，因为我的应用程序完全可以在 IE 上运行。我已经看到很多 fxn 来获取 xpath 并尝试集成它，但我没有得到返回值。我使用 jquery click() 函数检索值的简单代码片段不起作用。问题是我无法在函数中传递 html 元素。我仅从该站点获取的 xpath 函数。我的代码如下。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>click demo</title>
<style> 
p
{ 
   color: red;    
   margin: 5px;
   cursor: pointer; 
}  
p:hover
 { 
   background: yellow; 
 }
</style> 
<script src="http://code.jquery.com/jquery-1.9.1.js">
</script>
</head>
<body> 
<p id ="test">First Paragraph</p>
<p>Second Paragraph</p>
<p>Yet one more Paragraph</p>
<script>

$( "#test" ).click(function() { var value= $(this).getXPath();
alert(value) });

function getXPath( element )
{
var val=element.value;
alert("val="+val);
    var xpath = '';
    for ( ; element && element.nodeType == 1; element = element.parentNode )
    {
        alert(element);
        var id = $(element.parentNode).children(element.tagName).index(element) + 1;
        id > 1 ? (id = '[' + id + ']') : (id = '');
        xpath = '/' + element.tagName.toLowerCase() + id + xpath;
    }
    return xpath;
}
</script>
</body>
</html>
4

4 回答 4

23

将脚本更改为

$( "#test" ).click(function() { var value= getXPath( this  );
alert(value) });

function getXPath( element )
{
var val=element.value;
    //alert("val="+val);
    var xpath = '';
    for ( ; element && element.nodeType == 1; element = element.parentNode )
    {
        //alert(element);
        var id = $(element.parentNode).children(element.tagName).index(element) + 1;
        id > 1 ? (id = '[' + id + ']') : (id = '');
        xpath = '/' + element.tagName.toLowerCase() + id + xpath;
    }
    return xpath;
}
于 2013-09-04T06:31:01.170 回答
1

这可以帮助你

小提琴

$('p').click(function(){
parentEls = $(this).parents()
            .map(function () {
                  return this.tagName;
                })
            .get().join(", ");

    alert(parentEls);

    });
于 2013-09-04T06:31:34.563 回答
0

在 IE 中你需要安装 Bookmarklets。

安装书签的步骤

1)打开IE

2) 在地址栏中输入 about:blank 然后回车

3)从收藏夹主菜单中选择--->添加收藏夹

4) 在添加收藏夹弹出窗口中输入名称 GetXPATH1。

5）在添加收藏弹出窗口中单击添加按钮。

6）打开收藏夹菜单并右键单击新添加的收藏夹并选择属性选项。

7)GetXPATH1 属性将打开。选择 Web 文档选项卡。

8) 在 URL 字段中输入以下内容。

javascript:function getNode(node){var nodeExpr=node.tagName;if(!nodeExpr)return null;if(node.id!=''){nodeExpr+="[@id='"+node.id+"'] ";return "/"+nodeExpr;}var rank=1;var ps=node.previousSibling;while(ps){if(ps.tagName==node.tagName){rank++;}ps=ps.previousSibling;}if (rank>1){nodeExpr+='['+rank+']';}else{var ns=node.nextSibling;while(ns){if(ns.tagName==node.tagName){nodeExpr+='[1] ';break;}ns=ns.nextSibling;}}return nodeExpr;}

9) 单击确定。在弹出警报上单击“是”。

10）按照步骤3到5添加另一个收藏夹，将此收藏夹命名为GetXPATH2（步骤4）

11) 对刚刚创建的 GetXPATH2 重复步骤 6 和 7。

12) 在 GetXPATH2 的 URL 字段中输入以下内容

javascript:function o_ o(){var currentNode=document.selection.createRange().parentElement();var path=[];while(currentNode){var pe=getNode(currentNode);if(pe){path.push (pe);if(pe.indexOf('@id')!=-1)break;}currentNode=currentNode.parentNode;}var xpath="/"+path.reverse().join('/'); clipboardData.setData("文本", xpath);}o _o();

13) 重复步骤 9。

你们都完成了！

现在要获取元素的 XPATH，只需用鼠标选择元素。这将涉及在元素（链接、按钮、图像、复选框、文本等）开始之前单击鼠标左键并拖动它直到元素结束。完成此操作后，首先从收藏夹菜单中选择收藏夹 GetXPATH1，然后选择第二个收藏夹 GetXPATH2。在他点你会得到一个确认，点击允许访问按钮。现在打开一个记事本文件，右键单击并选择粘贴选项。这将为您提供您寻找的元素的 XPATH。

于 2013-09-04T06:55:56.493 回答
-1

这段代码给出了元素的路径。

      $('a').click(function () {
            var XPATH = "";
            var FindParent = true;
            var _parent = $(this);

            while (FindParent) {
                var myParent = _parent.parent();
                if (myParent != null) {
                    XPATH += myParent.prop("tagName") + "/";
                    _parent = myParent;
                }
                else {
                    FindParent = false;
                }

            }
        })
于 2013-09-04T06:34:26.663 回答