【JavaScript】要素の最初・最後の子要素を取得する

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

本記事では、JavaScriptで要素の最初・最後の子要素を取得する方法をご紹介しています。

上記の疑問にお答えします。

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

要素の最初・最後の子要素を取得するには

JavaScriptで要素の最初・最後の子要素を取得する場合は、下記プロパティを使用します。

• firstElementChild
• lastElementChild

firstElementChild

firstElementChildは、要素の最初の子要素を取得するプロパティです。子要素が存在する場合は要素を返し、存在しない場合はnullを返します。

firstElementChildの構文は下記の通りです。

element.firstElementChild;

実際に指定した要素の最初の要素を取得してみます。

最初の子要素の取得例

HTML

<ul class="list">
    <li class="list__item">1</li>
    <li class="list__item">2</li>
    <li class="list__item">3</li>
    <li class="list__item">4</li>
</ul>

JavaScript

let list = document.querySelector('.list');
console.log(list.firstElementChild);

実行結果

<li class="list__item">1</li>

指定した要素の最初の子要素を取得することができました。

参考：https://developer.mozilla.org/ja/docs/Web/API/Element/firstElementChild

lastElementChild

lastElementChildは、要素の最後の子要素を取得するプロパティです。子要素が存在する場合は要素を返し、存在しない場合はnullを返します。

lastElementChildの構文は下記の通りです。

element.lastElementChild;

実際に指定した要素の最後の要素を取得してみます。

最後の子要素の取得例

HTML

<ul class="list">
    <li class="list__item">1</li>
    <li class="list__item">2</li>
    <li class="list__item">3</li>
    <li class="list__item">4</li>
</ul>

JavaScript

let list = document.querySelector('.list');
console.log(list.lastElementChild);

実行結果

<li class="list__item">4</li>

指定した要素の最後の子要素を取得することができました。

参考：https://developer.mozilla.org/ja/docs/Web/API/Element/lastElementChild

最後に

本記事では、要素の最初と最後の要素を取得する方法として2つのプロパティをご紹介しました。本記事でご紹介したプロパティは対象が要素の場合となりますので、ノードを含める場合はfirstChildやlastChildを使用してください。

以上、JavaScriptで要素の最初・最後の子要素を取得する方法のご紹介でした！