Javascript querySelectorAll和：第一个孩子

我试图用querySelectorAll获取一个wikipedia表中每行的第一个链接列表，但我不确定：first child选择器为什么不起作用。我知道还有其他方法可以做到这一点，但我想知道querySelectorAll函数是否能解决这个特定问题

请参见html下面的“我的计划”：

<table class='wikitable'>
  <tr>
    <td>
      <a href="" title="">John doe</a>
    </td>
    <td>
      <a href="" title="">other link</a>
    </td>
    </tr>

  <tr>
    <td>
      <a href="" title="">Mary Jane</a>
    </td>
    <td>
      <a href="" title="">another link</a>
    </td>
  </tr>
</table>

前面的代码只是返回一个包含一个元素的节点：

<a href="" title="">John doe</a>

而是列出：

<a href="" title="">John doe</a>
<a href="" title="">Mary Jane</a>

---

您需要对所有行进行迭代，这样选择器将

document.querySelectorAll(('.wikitable tr td:first-child a')); 

使用tr:first child将仅选择第一行

let list=document.querySelectorAll（“.wikitable tr td:first child a”）；
控制台日志（列表）

在
中。wikitable tr:first child td:first child a'
，
tr:first child
将只选择第一个子元素（即，它只选择第一个子元素）

”.wikitable tr td:first child a'
将转到“.wikitable”表中的每一行，并选择第一个单元格中的任何
a
定位点（可能只有一个，但技术上可能有更多个）。
正确的选择器应该是

".wikitable tr td:first-child a"

tr:first child
表示“作为第一个孩子的
tr
”。这只适用于

<tr>
  <td>
    <a href="" title="">John doe</a>
  </td>
  <td>
    <a href="" title="">other link</a>
  </td>
</tr>

这可能是口味的问题，但是
”。wikitable>tr>td:first child>a'
更准确。
<tr>
  <td>
    <a href="" title="">John doe</a>
  </td>
  <td>
    <a href="" title="">other link</a>
  </td>
</tr>