2

我在使用 html DOM 时遇到问题。

如何从此路径获取值：

html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td

我只能找到诸如此类的东西getElementbyID/tag/name/class。

如何获取td元素的绝对 DOM '路径'（假设该表中第二行的第三个单元格）？我一直在到处寻找，但如果不涉及 ID/Class 等，就找不到简单的答案。

4

4 回答 4

3

您可以使用 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');

否则，只需使用允许您使用 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');

顺便说一句，像这样选择对于性能来说是可怕的。绝对可怕。阅读CSS 选择器以了解原因。

于 2012-12-15T19:45:17.247 回答
0

看起来你可能想要这样的东西：

对于以下示例 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>

这个 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());
});

如果性能成为问题，您可能需要使用原生 DOM 方法进行类似的操作。

于 2012-12-15T21:14:11.100 回答
0

首先，考虑您是否真的需要完整路径。引用 ID 或类更健壮，因为它们的移动部分更少。

如果您需要完整路径，您可能希望使用 XPath，因为它是专门为按路径查找元素而设计的。

这是一个简单的跨浏览器 XPath 库——还有很多其他的。

于 2012-12-15T20:37:36.150 回答
0

我正在玩这个想法。我希望能够在页面上找到任何节点（使用无头浏览器）。试图构建一个绝对节点路径我创建了一个递归函数，但我发现它并不完全独特，这很烦人。例如，在这里，每个帖子都是模板化的，因此在第三个响应中选择文本将显示与第一个帖子相同的 HTML 标签上的节点路径

const buildPath = (node) => {
  console.log(node);
  if(node.tagName !== "HTML") {
    path.unshift(node.tagName.toLowerCase())
    buildPath(node.parentNode)
  }
};
const path = [];
builtPath(<start node>);
document.querySelector(path.join(" "))

但这就是我现在卡住的地方。有些东西没有任何特定的类或名称或 ID 可以添加到其中。我可能需要捕获 innertext 或 innerhtml 并尝试匹配它。有点烦。我想您可以像 D3 一样加载并注入一个增量 ID 作为数据，但是站点根本无法更改，这对于这种方法也可能是正确的，但我认为更少。

于 2021-07-27T20:46:54.180 回答