【JavaScript】最初の子要素、最後の子要素を取得する方法

JavaScriptで最初の子要素、最後の子要素を取得するには「firstElementChild」と「lastElementChild」のプロパティを使用します。

最初の子要素を取得：firstElementChild

firstElementChild は最初の子要素を返します。子要素がない場合はnullを返します。

HTML：

<ul class="list">
    <li>要素1</li>
    <li>要素2</li>
    <li>要素3</li>
</ul>

たとえば上記のようなHTMLだった場合、JavaScript では次のように記述して最初の要素を取得します。

JavaScript：

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

実行結果：

<li>要素1</li>

lastElementChild は最初の子要素を返します。子要素がない場合はnullを返します。
「firstElementChild」と同じ仕様ですね。

JavaScript：

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

実行結果：

<li>要素3</li>

このようにして、最初の子要素と最後の子要素を簡単に取得できます。