我是 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};
}
【问题讨论】：
标签： javascript xpath
您可以从我曾经编写的 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 中工作，可能需要进行一些更改。
【讨论】：
对于一个元素，没有所谓的“那个”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]/[namespace-uri()='x' and local-name='z'][5]/...
这三个都很容易用你喜欢的任何语言用一个简单的递归函数来构造。
【讨论】：
你可以在 https://github.com/bermi/element-xpath 使用 Github 库来解决这个问题
包含脚本
<script src="https://raw.github.com/bermi/element-xpath/master/element-xpath.min.js" type="text/javascript"></script>
使用此代码
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 (reference here) 向后遍历 DOM 树来构建 xpath。您还需要做一些工作来检查每个节点基于标签名称的子编号。还要记住，在 xpath 中，根据规范 (reference here)，索引从 1 开始，而不是 0。
编辑 #2：请参阅此 post 中的 getPathTo()。它不会一直向上爬到树上，但它会获得相对于兄弟姐妹的位置。此外，在绝对路径 here 上进行全面尝试，还有一个不被接受的答案。
【讨论】：