Javascript 如何通过单击html元素获取xpath_Javascript_Jquery_Html_Xpath

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

javascript jquery html xpath

Javascript 如何通过单击html元素获取xpath,javascript,jquery,html,xpath,Javascript,Jquery,Html,Xpath,我对编程非常陌生，必须在单击html元素时生成Xpath。例如：如果我点击了用户名的文本框，那么它应该给我类似xpath的 html/head/body/tr[1]/表[2]。。。。。等等。主要的事情是我不能使用firebug，因为我的应用程序将完全在IE上运行。我已经看到很多fxn来获取xpath并尝试将其集成，但我没有得到返回值。我使用jquery click函数检索值的一个简单代码段不起作用。问题是我无法在函数中传递html元素。我仅从该站点获取的xpath函数。我的代码如下 <!

我对编程非常陌生，必须在单击html元素时生成Xpath。例如：如果我点击了用户名的文本框，那么它应该给我类似xpath的 html/head/body/tr[1]/表[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>

将脚本更改为

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

这可以帮助你

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

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

            }
        })

在IE中，您需要插入书签

安装BOOKMARKLETS的步骤

1开放式IE

2在地址栏中键入about:blank，然后按enter键

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

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

5单击添加收藏夹弹出窗口中的添加按钮

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

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

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

javascript：函数getNodeNodeNodeNode{var nodeExpr=node.tagName；if！nodeExprreturn null；ifnode.id！={nodeExpr+=[@id='+node.id+']；return/+nodeExpr；}var-rank=1；var-ps=node.previousSibling；whileps{ifps.tagName==node.tagName{rank++；}ps=ps.previousSibling；}ifrank>1{nodeExpr+'[''+'']]；else}var-rese=node.nexiblens=node.tagName==node.lens==node.gland.lens==siblens{nodeExpr+='[1]'；break；}ns=ns.nextSibling；}}}返回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=[]；whilecurrentNode{var pe=getNodecurrentNode；ifpe{path.pushpe；ifpe.indexOf'@id'！=-1break；}currentNode=currentNode.parentNode}var xpath=/+path.reverse.join'/'；clipboardData.setDataText，xpath；}；}

13重复步骤9

你们都完了

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

谢谢帮助。但它正在以相反方向打印路径。我已经尝试了这一点，但其中的问题是它提供了类似XPATH的//输入[@id='user']。虽然这个xpath是正确的，但我需要从html/../toclicked path的整个路径。但是谢谢你的帮助。除了android webview外，效果很好。有什么解决方法吗？为什么你要删除关于ObservableList的问题？我可以举个例子说明我会怎么做。我犯了一个非常愚蠢的错误…所以删除了它…但我会将它删除到h有更好的建议…谢谢你的建议。

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

            }
        })