【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で何番目の子要素を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。