javascript - 如何使用 Javascript 或 Jquery 创建被点击元素的 Xpath？-6ren

javascript - 如何使用 Javascript 或 Jquery 创建被点击元素的 Xpath？

转载作者：行者123 更新时间：2023-11-30 14:17:36

26

4

我有一个网页，我在其中绑定(bind)了元素上的点击事件。当用户点击特定元素时。我想生成从 html 或 body 标记开始的元素的 XPath。即 “绝对 Xpath”

假设在下面的 html 示例中，我单击文本为“USA”的跨度，因此 Absolute Xpath 将是

/html[1]/body[1]/div[2]/div[1]/div[1]/span[1]

<html>
    <body>
        <div class="header">Countries</div>
        <div class="row">
            <div class="row_in">
                <div class="row_in_in">
                    <span>India</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row_in">
                <div class="row_in_in">
                    <span>USA</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row_in">
                <div class="row_in_in">
                    <span>UK</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row_in">
                <div class="row_in_in">
                    <span>France</span>
                </div>
            </div>
        </div>
    </body>
</html>

我们是否有任何库可以帮助我生成我传递元素 Dom 的 XPath 并且它可以生成它？

我遇到了几个库，但它们有助于根据提供的 Xpath 检测 html 中的内容。

最佳答案

您需要遍历被点击的元素及其父元素来完成这项工作。所以你可以调用一个函数嵌套来完成这项工作。

var xpath;
$("*").click(function(e){
  xpath = '';
  addXpath($(this));
  console.log(xpath);
  e.stopPropagation();
});

function addXpath($ele){
  var tagName = $ele[0].tagName.toLowerCase();
  var index = $ele.parent().children(tagName).index($ele)+1;
  xpath = '/'+tagName +'['+index+']'+ xpath;
  !$ele.parent().is(document) ? addXpath($ele.parent()) : "";
}

body {background: green}
.header {background: orange}
.row_in {background: yellow}
.row_in_in {background: blue}
span {background: red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">Countries</div>
<div class="row">
<div class="row_in">
  <div class="row_in_in">
    <span>India</span>
  </div>
</div>
</div>
<div class="row">
<div class="row_in">
  <div class="row_in_in">
    <span>USA</span>
  </div>
</div>
</div>
<div class="row">
<div class="row_in">
  <div class="row_in_in">
    <span>UK</span>
  </div>
</div>
</div>
<div class="row">
<div class="row_in">
  <div class="row_in_in">
    <span>France</span>
  </div>
</div>
</div>

关于javascript - 如何使用 Javascript 或 Jquery 创建被点击元素的 Xpath？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53300024/

26

4

0

文章推荐： javascript - 如何用javascript中的值替换句子中的单词？

文章推荐： Javascript addEventListener 异常

文章推荐： javascript - 制表符 - 将菜单按钮添加到列标题

文章推荐： C# 语言规范 "Program Instantiation"似乎被错误识别

xpath - [xpath]在获取 xpath 以获得相邻表格行的帮助时需要帮助
编辑:为什么这被否决了？我真的不知道...顺便说一句 ../不起作用，因为我不想要 Table 的父级但实际上想要 ../td+1 我不知道这是否可能？嗨，大家好。我手头有一个相当复杂的问题..
java - Xpath:使用同级 xpath 定位同级 xpath
我很难找到需要单击的输入(复选框)元素的 xpath。我正在尝试使用其他跨度元素来定位它。元素包含 Angular 属性，不知道这是否重要？元素的结构如下: Company name
xpath - xpath 中从不使用哪些字符？
我正在尝试构建一个包含许多 XPath 作为参数的 DSL。我是 XPath 的新手，我需要一个 XPath 语法中从未使用过的字符，这样我就可以在脚本的一行中分隔 n 个 XPath。我的问题:哪些
xpath - Xpath，用于检索父级内部的所有标签
使用xpath在父标签内找到特定标签：输入样例：
xpath - Xpath，在其他两个节点之间查找节点
我需要构造一个通用XPath来找到正确的节点，其中的标准是日期和时间。例如查找“ 5 May”，“ 12:17:44”的节点 XML具有日期和时间标签。不方便地，日期标签仅在当天的第一次出现时填充。
xpath - Xpath/xQuery的月份差异
我正在尝试获取xPath几个月内两个日期之间的差异。几天之内我就没问题了（1127） days-from-duration(xs:date('2012-06-17')-xs:date('2009-0
xpath - Xpath-如何选择一个包含文本但仅此而已的元素
我试图选择一个包含一段文本的元素，但是我不想选择包含该文本加上其他文本的元素。我通常会使用text()='abc def'，但是这个特定元素在前后都包含空格。这是一个示例片段：
xpath - XPath:通过子节点的属性值获取节点
亲爱的，您能帮我用这个XPATH吗？可以说我有以下HTML代码 text value1 value2 text 我需要构建一
xpath - 具有排除功能的复杂 xpath
我正在尝试提取带有排除项的 xpath，但无法执行此操作。 (//div[@class='row site country-names']/following-sibling::div)[1]/di
xpath - 在单个节点中获取所有包含html的文本scrapy xpath
response.xpath('//*[@id="blah"]//text()') 假设我的html是 This is a simple text foo and this is after tag.
xpath - Xpath:基于父值的查询中的异常
除了那些具有"//ul/li[not(@*)][count(*)=0]"父项的人以外，我需要全部接受。我已经尝试过，但是不幸的是它不起作用。有谁知道，我该怎么处理？提前致谢。最佳答案我认为您需
xpath - XPath:使用子字符串之后仅返回一个匹配项
我使用XPath的问题是，每当我使用“子字符串”功能时，我只会得到一个匹配项，而我想全部获得它们。另一个问题是，每当我使用“子字符串”和运算符的组合时它只是行不通（没有匹配项）。例如：http:/
xpath - XPath:获取具有位置和属性的元素
我正在尝试通过其位置和属性获取项目，但不知道如何做。我要实现的是将这一点统一起来： Xpath("//h4/a[contains(@href,'#vuln_')]") 还有这个： Xpath
xpath - Xpath |路径内的运算符
我有一个xpath如下： .//*[text()='Name:']/../child::select | .//*[text()='Name:']/../child::span 但是对我来说，它既不紧
xpath - xpath:在同一级别上组合多个过滤器
我拼命试图在xpath中组合几个过滤器。假设我的数据如下所示： DELETE 1 This is my title my sh
xpath - 如何通过 Xpath 设置元素，在那些已经使用 Xpath 设置的元素内？
我想在已经通过 xpath 设置的其他元素中使用 xpath 来指示元素的位置。下面的一个已经通过 xpath 设置(我没有改变) //Base_Code
xpath - Xpath:在括号内获取值？
是否可以使用xpath直接在括号内抓取信息？还是以后再用正则表达式过滤？ HTML如下所示： Product name (UN1QU3 C0D3) 使用以下Xpath表达式，我可以在此中获取所有内容：
xpath - XPath:根据另一个节点值选择一个节点
我试图使用一个XPath表达式来选择一个节点，该节点的子节点与文档中的另一个节点匹配。匹配将意味着该节点的所有属性都相同。因此，如果将一个节点与多个属性进行比较，则无法进行单独的属性比较。作为示例
xpath - XPath 中艾弗森括号最简单的语法是什么？
我想在 XPath 表达式中使用 Iverson 括号(即映射 true => 1，false => 0)。示例:而不是书写 someNumber+(if(elem1/elem2[@attr='12
xpath - XPath:如何通过IN条件选择节点？
是否可以以类似方式选择节点？ './tr[position() in (1, 3, 7)]' 我只找到以下解决方案： './tr[position() = 1 or position() = 3 or

首页

博学

6Ren·AI

商城

javascript - 如何使用 Javascript 或 Jquery 创建被点击元素的 Xpath？