如何使用Javascript计算元素的XPath位置?

编程入门行业动态更新时间:2024-10-24 18:18:23

本文介绍了如何使用Javascript计算元素的XPath位置?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

假设我有一个包含不同类型标签的大型 HTML 文件，类似于您现在正在查看的 StackOverflow 文件.

Let's say I have a large HTML file with different kinds of tags, similar to the StackOverflow one you're looking at right now.

现在假设您单击页面上的一个元素，计算引用该特定元素的最基本 XPath 的 Javascript 函数会是什么样的?

Now let's say you click an element on the page, what would the Javascript function look like that calculates the most basic XPath that refers to that specific element?

我知道在 XPath 中有无数种引用该元素的方式，但我正在寻找一种只查看 DOM 树的方法，而不考虑 ID、类等.

I know there are an infinite ways of refering to that element in XPath, but I'm looking for something that just looks at the DOM tree, with no regard for IDs, classes, etc.

示例:

<html> <head><title>Fruit</title></head> <body> <ol> <li>Bananas</li> <li>Apples</li> <li>Strawberries</li> </ol> </body> </html>

假设您点击了Apples.Javascript 函数将返回以下内容:

Let's say you click on Apples. The Javascript function would return the following:

/html/body/ol/li[2]

它基本上只会沿着 DOM 树向上一直工作到 HTML 元素.

It would basically just work its way upward the DOM tree all the way to the HTML element.

澄清一下，点击"事件处理程序不是问题所在.我可以做到这一点.我只是不确定如何计算元素在 DOM 树中的位置并将其表示为 XPath.

Just to clarify, the 'on-click' event-handler isn't the problem. I can make that work. I'm just not sure how to calculate the element's position within the DOM tree and represent it as an XPath.

附注感谢使用或不使用 JQuery 库的任何答案.

PS Any answer with or without the use of the JQuery library is appreciated.

PPS我对 XPath 完全陌生，所以我什至可能在上面的例子中犯了一个错误，但你会明白的.

PPS I completely new to XPath, so I might even have made a mistake in the above example, but you'll get the idea.

2010 年 8 月 11 日看起来有人问过类似的问题:生成/获取所选文本节点的 Xpath

Edit at August 11, 2010: Looks like somebody else asked a similar question: generate/get the Xpath for a selected textnode

推荐答案

Firebug 可以做到这一点，而且它是开源的 (BSD) 所以你可以重用他们的实现，不需要任何库.

Firebug can do this, and it's open source (BSD) so you can reuse their implementation, which does not require any libraries.

这是从上面链接的源中摘录的.以防万一上面的链接会改变.请检查来源以从更改和更新或提供的完整功能集中受益.

This is an extract from the linked source above. Just in case the link above will change. Please check the source to benefit from changes and updates or the full featureset provided.

Xpath.getElementXPath = function(element) { if (element && element.id) return '//*[@id="' + element.id + '"]'; else return Xpath.getElementTreeXPath(element); };

上面的代码调用了这个函数.注意我添加了一些换行以避免水平滚动条

Above code calls this function. Attention i added some line-wrapping to avoid horizontal scroll bar

Xpath.getElementTreeXPath = function(element) { var paths = []; // Use nodeName (instead of localName) // so namespace prefix is included (if any). for (; element && element.nodeType == Node.ELEMENT_NODE; element = element.parentNode) { var index = 0; var hasFollowingSiblings = false; for (var sibling = element.previousSibling; sibling; sibling = sibling.previousSibling) { // Ignore document type declaration. if (sibling.nodeType == Node.DOCUMENT_TYPE_NODE) continue; if (sibling.nodeName == element.nodeName) ++index; } for (var sibling = element.nextSibling; sibling && !hasFollowingSiblings; sibling = sibling.nextSibling) { if (sibling.nodeName == element.nodeName) hasFollowingSiblings = true; } var tagName = (element.prefix ? element.prefix + ":" : "") + element.localName; var pathIndex = (index || hasFollowingSiblings ? "[" + (index + 1) + "]" : ""); paths.splice(0, 0, tagName + pathIndex); } return paths.length ? "/" + paths.join("/") : null; };