querySelectorAllと：first child

Question

私はquerySelectorAllを使って1つのウィキペディアテーブルの行ごとに最初のリンクのみを取得しようとしていますが、first-childセレクタが動作しない理由はわかりません。私はそれを行う他の方法があることを知っているが、私はquerySelectorAll関数でこの特定の問題の解決策があるかどうかを知りたい。

は、htmlの下に私のattempsを参照してください。

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

代わりリスト：以前のコードでは、ただ一つの要素を持つノードを返して

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

：

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

Answer 1

正しい選択「とは、第1子あるtr」

".wikitable tr td:first-child a" 

tr:first-child手段であるべきです。これはのみに適用されます

Answer 2

セレクタはTR使っ

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

になりますので、あなたはすべての行を反復処理する必要があります：最初の行のみを選択する最初の子を。 '.wikitable tr:first-child td:first-child a'で

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>

Answer 3

、tr:first-child最初の子（すなわち、それは最初trを選択）のみtr要素を選択します。

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