如何选择没有id或类的嵌套元素？

Question

例如，假设我有以下HTML：

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

<div></div>

我希望在td元素中使用X来获取值。 我知道我显然会使用

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

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

Answer 1

你应该先得到tr

 var tr = document.getElementsByTagName("tr")[0]; var foo = tr.getElementsByTagName("td")[0].innerHTML; console.log(foo);

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

Answer 2

选择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 。