如何选择没有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

＆＃13;

＆＃13;

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

＆＃13;

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

<div></div>

＆＃13;

＆＃13;

＆＃13;

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。

文档：document.querySelector()