Question

我对编程很陌生，必须在点击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>

Answer 1

将脚本更改为

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

Answer 2

这可以帮到你

fiddle

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

    alert(parentEls);

    });

Answer 3

在IE中你需要insatll Bookmarklets。

安装书签的步骤

1）打开IE

2）在地址栏中键入about：blank并按Enter键

3）从收藏夹主菜单中选择---＆gt;添加收藏夹

4）在Add a favorite popup窗口中输入名称GetXPATH1。

5）点击添加收藏夹弹出窗口中的添加按钮。

6）打开“收藏夹”菜单，右键单击新添加的收藏夹，然后选择属性选项。

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

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

javascript：function getNode（node）{var nodeExpr = node.tagName; if（！nodeExpr）返回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＆gt; 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（“Text”，xpath）;} o _o（）;

13）重复步骤9.

你们都完成了！

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

Answer 4

此代码提供元素的路径。

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

            }
        })

如何通过单击html元素获取xpath

4 个答案: