javascript 如何获取html元素的绝对DOM路径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13895522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get absolute DOM path of html element
提问by Rpk_74
I'm having problems with html DOM.
我在使用 html DOM 时遇到问题。
How do I get the value from this path:
我如何从这条路径中获取价值：
html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td
html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td
I can only find stuff like getElementbyID/tag/name/classetc.
我只能找到诸如此类的东西getElementbyID/tag/name/class。
How do I get the absolute DOM 'path' of the tdelement (let's say the 3rd cell of the second row in that table)?
I've been looking everywhere but cannot find a simple answer without ID/Class etc involved.
我如何获得td元素的绝对 DOM“路径” （假设该表中第二行的第三个单元格）？我一直在寻找任何地方，但找不到不涉及 ID/Class 等的简单答案。
回答by Christian
You could use querySelector(), but it doesn't have great support...
您可以使用 querySelector()，但它没有很好的支持......
var elem = document.querySelector('html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td');
Otherwise just use a library that allows you to use CSS selectors, such as jQuery.
否则，只需使用允许您使用 CSS 选择器的库，例如 jQuery。
var $elem = $('html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td');
By the way, selecting like this is horriblefor performance. Absolutely terrible. Have a read up on CSS selectorsto learn why.
顺便说一句，这样的选择对性能来说是可怕的。绝对可怕。阅读CSS 选择器以了解原因。
回答by mikemaccana
First, consider whether you do really need full paths. Referring to IDs or classes is more robust as they have less moving parts.
首先，考虑您是否真的需要完整路径。引用 ID 或类更可靠，因为它们的移动部分较少。
If full paths are what you need, you may wish to use XPath, as it's specifically designed for finding elements by path.
如果您需要完整路径，您可能希望使用 XPath，因为它是专门为按路径查找元素而设计的。
Here's a simple cross browser XPath library- there are many others.
这是一个简单的跨浏览器 XPath 库- 还有许多其他库。
回答by BobS
Looks like you may want something like this:
看起来你可能想要这样的东西：
For the following sample HTML,
对于以下示例 HTML，
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="findit.js"></script>
</head>
<body>
<div id="header">
<h1>Welcome to my ASP.net site!</h1>
</div>
<div id="h440292">
<table>
<!-- tbody omitted, but some (all?) browsers add it -->
<tr>
<td>junk</td>
<td>junk</td>
<td>junk</td>
</tr>
<tr>
<td>junk</td>
<td>junk</td>
<td>pick me!</td>
</tr>
</table>
</div>
</body>
</html>
this jQuery code will find the cell that says "pick me!"
此 jQuery 代码将找到显示“pick me!”的单元格。
$(function () {
var $resultCell = $("body")
.children("div").eq(1)
.children("table")
// Note I have to add this even though
// I omitted the tbody in the HTML markup
.children("tbody")
.children("tr").eq(1)
.children("td").eq(2);
alert($resultCell.text());
});
If performance becomes a problem, you may need to resort to doing something similar using the native DOM methods.
如果性能成为问题，您可能需要求助于使用本机 DOM 方法执行类似操作。
