web-dev-qa-db-ja.com

querySelectorAllおよび：first child

QuerySelectorAllを使用して1つのウィキペディアテーブルの行ごとの最初のリンクのみのリストを取得しようとしていますが、：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'));

前のコードは、1つの要素を持つノードを返すだけです。

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

代わりにリスト：

<a href="" title="">John doe</a>
<a href="" title="">Mary Jane</a>
javascriptselectors-api
9
notforever

正しいセレクターは

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

'.wikitable tr:first-child td:first-child a'、tr:first-childは、最初の子であるtr要素のみを選択します（つまり、最初のtrのみを選択します）。

'.wikitable tr td:first-child a'は、「。wikitable」テーブルの各行に移動し、最初のセルで任意のaアンカーを選択します（おそらく1つだけですが、技術的にはさらに多くなる可能性があります）。

4
Harris

セレクターが次のようになるように、すべての行を反復処理する必要があります

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