javascript - 子ノードの選択 (DOM)

Question

<a>純粋な Javascript を使用して 2 番目のタグを選択するにはどうすればよいですか?

<div class="navigation">
    <a href="/page/2/">Prev</a>
    <a href="/page/4/">Next</a>
</div>

Answer 1

DOM セレクターgetElementsByClassName()を使用します。

戻り値:クラス名を含む要素の配列。

を、セレクター[?]の戻り値からのターゲットのインデックスに置き換えます。getElementsByClassNameたとえば、<div>タグを含む<a>タグがクラス名を持つドキュメントの最初の要素である場合、それは戻り配列のnavigationインデックス(0 ベースであるため) にあるため、対応する要素に使用する必要があります。0[0]

.childrenプロパティを使用して、親ノード (この場合は タグ)の子ノード (この場合はタグ) のHTMLCollectionを返します。<a><div>

//JS

document.getElementsByClassName('navigation')[1].children[1];

//HTML

<div class="navigation">
    <a href="/page/1/">Prev</a>
    <a href="/page/2/">Next</a> 
</div>
<div class="navigation">
    <a href="/page/3/">Prev</a>
    <a href="/page/4/">Next</a> (selected element)
</div>
<div class="navigation">
    <a href="/page/5/">Prev</a>
    <a href="/page/6/">Next</a> 
</div>
<div class="navigation">
    <a href="/page/7/">Prev</a>
    <a href="/page/8/">Next</a> 
</div>