javascript - 如何选择没有 id 或 class 的嵌套元素？

Question

例如，假设我有以下 HTML:

<div>
  <table>
    <tr>
      <td>X</td>
      <td></td>
    </tr>
  </table>
</div>

<div></div>

我希望在带有 X 的 td 元素中找到值。我知道我显然会使用

var foo = document.getElementsByTagName("TD")[0].innerHTML;

为了选择特定的 td 元素，而不是其他元素之一。但是，鉴于我知道元素的路径，如何以这种方式使用 javascript 来选择这个特定值？

Answer 1

选项 1:继续前进。

document.getElementsByTagName("div")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[0]

选项 2: querySelector

document.querySelector("div tr td")

querySelector 就像使用 CSS 选择器一样。您甚至可以按类别或 ID 选择。注意:如果要选择的元素不止一个，请使用querySelectorAll。

作为旁注，document.querySelectorAll("div") 和 document.getElementsByTagName("div") 之间有一个重要区别，前者返回一个NodeList后者返回 HTMLCollection .

文档:document.querySelector()