Question

我正在尝试使用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>

我的代码：

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

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

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

取而代之的是一个清单：

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

Answer 1

正确的选择器应为

".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>

Answer 2

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

'.wikitable tr td:first-child a'将转到'.wikitable'表格中的每一行，并选择第一个单元格中的任何a锚点（可能只会有一个，但从技术上来说可能会有更多）。< / p>

Answer 3

你需要遍历所有行，所以选择器将是

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

使用 tr：first-child 只会选择第一行。

let list = document.querySelectorAll(('.wikitable tr td:first-child a')); 

console.log(list);

<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>

querySelectorAll和：第一个孩子

3 个答案: