【JavaScript】何番目の子要素を取得する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで親要素を取得後、何番目（n番目）に存在する子要素を取得する方法をご紹介しています。

検証に使用する要素

本記事では下記のリストを検証に使用しています。idにparentを持つ要素を取得し、parentが持ちリストアイテムの中から何番目に存在する子要素を取得しながら解説していきたいと思います。

<ul id="parent">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
</ul>

では、解説していきます。

最初の子要素を取得する「element.firstElementChild」

最初の子要素の取得は、elementプロパティの「firstElementChildを使用します。「firstElementChildは指定した要素が持つ最初の子要素を取得することができます。

JS

var list = document.getElementById("parent");

console.log(list.firstElementChild);

実行結果

<li>Item1</li>

最後の子要素を取得する「element.lastElementChild」

最後の子要素の取得は、elementプロパティの「lastElementChildを使用します。「lastElementChildは指定した要素が持つ最後の子要素を取得することができます。

JS

var list = document.getElementById("parent");

console.log(list.lastElementChild);

実行結果

<li>Item5</li>

n番目の子要素を取得する「element.children[n]」

n番目の子要素の取得は、elementプロパティの「childrenを使用します。「childrenに数字を指定することで、指定した番号に存在する子要素を取得することができます。

JS

var list = document.getElementById("parent");

console.log(list.children[2]);

実行結果

<li>Item3</li>

奇数番目の子要素を取得する

奇数番目の子要素の取得は、elementプロパティの「childrenを使用します。取得したlistをループで回して奇数番目の要素だけを取得します。奇数番目の判断は剰余演算子の結果で分岐しています。

JS

var list = document.getElementById("parent");

for (let i = 0; i < list.children.length; i++){
    
    if(0 == i % 2){
        console.log(list.children[i]);
    }
}

実行結果

<li>Item1</li>
<li>Item3</li>
<li>Item5</li>

偶数番目の子要素を取得する

偶数番目の子要素の取得は、elementプロパティの「childrenを使用します。取得したlistをループで回して偶数番目の要素だけを取得します。偶数番目の判断は剰余演算子の結果で分岐しています。

JS

var list = document.getElementById("parent");

for (let i = 0; i < list.children.length; i++){
    
    if(0 != i % 2){
        console.log(list.children[i]);
    }
}

実行結果

<li>Item2</li>
<li>Item4</li>

親を指定する必要がなければ「querySelector」で簡単に取得できる

本記事では親要素を指定した後に子要素を取得するがメインですが、もし親要素を取得して～の部分が必要ないようであれば、「querySelector」や「querySelectorAll」を使用することでもっと簡単に取得することができます。環境に応じてご使用ください。

最初の子要素を取得する

var listItem = document.querySelector("#parent li:first-child");

最後の子要素を取得する

var listItem = document.querySelector("#parent li:last-child");

n番目の子要素を取得する

var listItem = document.querySelector("#parent li:nth-child(3)");

奇数番目の子要素を取得する

var listItem = document.querySelectorAll("#parent li:nth-child(odd)");

偶数番目の子要素を取得する

var listItem = document.querySelectorAll("#parent li:nth-child(even)");

最後に

いかがでしたでしょうか。

「JavaScript」で何番目の子要素を取得するという処理はリストやテーブル等で頻繁に使用します。もしサイト制作で実装される機会があれば、参考にしていただければと幸いです。

以上、JavaScriptで何番目の子要素を取得する方法のご紹介でした！