querySelectorAll and:first child

Question

Я пытаюсь получить список только первых ссылок на строку в одной таблице википедии с querySelectorAll, но я не уверен, почему не работает селектор: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 якоря в первой ячейке (предположительно, будет только один, но технически может быть больше).

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>