JavaScript

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

この記事では、JavaScriptのfirstElementChildlastElementChildについて解説します。

簡単なサンプルコードも紹介します。

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

ウェブつくを支えてくれるスポンサー

  • この記事を書いた人
ウェブつく管理人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2020 ウェブつく Powered by AFFINGER5