この記事では、JavaScriptのfirstElementChildとlastElementChildについて解説します。
簡単なサンプルコードも紹介します。
firstElementChild・lastElementChildとは？使い方
firstElementChildは指定した要素の「最初の子要素を取得」します。
lastElementChildは指定した要素の「最後の子要素を取得」します。
サンプルコード
下記のHTMLで、<div id="block">の始めの子要素と最後の子要素、<ul id="list">の始めの子要素と最後の子要素を取得します。
<div id="block">
<p>ミーティングの議題</p>
<ul id="list">
<li id="about_a">Aについて</li>
<li id="about_b">Bについて</li>
<li id="about_c">Cについて</li>
</ul>
</div>var block = document.getElementById('block');
console.log(block.firstElementChild);
// => <p>
console.log(block.lastElementChild);
// => <ul id="list">
var list = document.getElementById('list');
console.log(list.firstElementChild);
// => <li id="about_a">
console.log(list.lastElementChild);
// => <li id="about_c">以上のようになります。
また、該当する要素がない場合はnullとなります。上記のHTMLで<li id="about_b">の最初の子要素を取得しようとするとnullとなります。
var about_b = document.getElementById('about_b');
console.log(about_b.firstElementChild);
// => null