Question

我遇到了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'路径'（假设该表中第二行的第3个单元格）？我一直在寻找无处不在但没有ID / Class等的简单答案。

Answer 1

您可以使用querySelector（），but it doesn't have great support ...

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 selectors以了解原因。

Answer 2

首先，考虑一下您是否确实需要完整路径。引用ID或类更加健壮，因为它们的移动部件较少。

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

这是一个simple cross browser XPath library - 还有很多其他人。

Answer 3

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

对于以下示例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代码会找到“选择我！”的单元格。

$(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方法执行类似操作。

Answer 4

我正在考虑这个想法。我希望能够在页面上找到任何节点（使用无头浏览器）。试图建立一个绝对节点路径我创建了一个递归函数，但我发现它不是完全独特的，这很烦人。例如，在这里，每个帖子都是模板化的，因此在第三个响应中选择文本将显示与第一个帖子相同的 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 作为数据，但是网站根本无法改变，这对于这种方法也可能是正确的，但我认为不那么如此。

如何获取html元素的绝对DOM路径

4 个答案: