如何获取X/HTML文件中元素的xpath

How do i get the xpath of an element in an X/HTML file

本文关键字：文件 HTML 元素 xpath 何获取 获取      更新时间：2023-09-26

我是Xpath的初学者，想知道是否有任何方法可以在javascript/jquery中获得元素的Xpath。我需要一种绝对的方法来识别一个元素，我使用了Xpath，但不知道如何识别。

场景是我有一个元素的jquery引用。我希望它的xpath在鼠标单击时存储在数据库中。一旦我有了jquery引用，我如何获得HTML元素的Xpath。我需要能够在之后将Xpath转换为绝对元素

function clickTrack(event){
offset=event.pageX;
var xpath=getXpath(this);//I need the xpath here
data={'xpath':xpath,'offset':offset};
}

您可以从我曾经编写的XPath工具中提取此功能：

http://webkitchen.cz/lab/opera/xpath-tool/xpath-tool.js

编辑：点击此处：

function getXPath(node) {
    var comp, comps = [];
    var parent = null;
    var xpath = '';
    var getPos = function(node) {
        var position = 1, curNode;
        if (node.nodeType == Node.ATTRIBUTE_NODE) {
            return null;
        }
        for (curNode = node.previousSibling; curNode; curNode = curNode.previousSibling) {
            if (curNode.nodeName == node.nodeName) {
                ++position;
            }
        }
        return position;
     }
    if (node instanceof Document) {
        return '/';
    }
    for (; node && !(node instanceof Document); node = node.nodeType == Node.ATTRIBUTE_NODE ? node.ownerElement : node.parentNode) {
        comp = comps[comps.length] = {};
        switch (node.nodeType) {
            case Node.TEXT_NODE:
                comp.name = 'text()';
                break;
            case Node.ATTRIBUTE_NODE:
                comp.name = '@' + node.nodeName;
                break;
            case Node.PROCESSING_INSTRUCTION_NODE:
                comp.name = 'processing-instruction()';
                break;
            case Node.COMMENT_NODE:
                comp.name = 'comment()';
                break;
            case Node.ELEMENT_NODE:
                comp.name = node.nodeName;
                break;
        }
        comp.position = getPos(node);
    }
    for (var i = comps.length - 1; i >= 0; i--) {
        comp = comps[i];
        xpath += '/' + comp.name;
        if (comp.position != null) {
            xpath += '[' + comp.position + ']';
        }
    }
    return xpath;
}

如果你想让它也在IE中工作，它可能需要一些更改。

元素没有"the"XPath这样的东西。

当人们问这个问题时，他们通常想要三件事中的一件：

（a） 元素祖先中元素的名称，例如/a/b/c/d

（b） 作为（a）但是添加了例如/a[2]/b[3]/c[1]/d[4]的位置信息。（一种变体是只在位置信息不冗余的情况下才需要位置信息）

（c） 如（b），但没有命名空间依赖项，例如/[namespace-uri（）='x'和local-name（）='y'][1]/。。。

这三种语言都很容易用一个简单的递归函数在任何你喜欢的语言中构建。

您可以在https://github.com/bermi/element-xpath

  1. 包括脚本

      <script src="https://raw.github.com/bermi/element-xpath/master/element-xpath.min.js" type="text/javascript"></script>

    1. 使用此代码

       document.body.addEventListener("click", function (ev) {
     console.log(ev);
     console.log(ev.toElement);
     var xpath = getElementXpath(ev.toElement);
     console.log(xpath);
});

需要更多信息，但如果您有元素的id，这很容易。例如，如果您的jquery引用正在获取id="myDiv"的div，那么合适的xpath应该是

//div[@id="myDiv"]

以下是xpath教程：http://www.tizag.com/xmlTutorial/xpathtutorial.php

一个好的裁判：https://developer.mozilla.org/en/XPath

编辑：我看到你想要的是只给定节点的绝对xpath。在这种情况下，我相信您将不得不通过使用parentNode向后遍历DOM树来构建xpath（此处引用）。您还需要做一些工作来检查每个节点基于标记名称的子编号。还要记住，在xpath中，根据规范，索引以1开头，而不是0（此处引用）。

编辑#2：请参阅本文中的getPathTo()。它不会一直爬到树上，但它会得到相对于兄弟姐妹的位置。此外，还有一个无法接受的答案，那就是对绝对路径的全面尝试。

相关文章：