【JavaScript】最初・最後の子要素を取得する方法｜firstElementChild・lastElementChild・firstChild との違い・CSS :first-child まで解説

<ul id="list">
  <li>アイテム 1</li>
  <li>アイテム 2</li>
  <li>アイテム 3</li>
</ul>

const list = document.getElementById("list");

const first = list.firstElementChild;
console.log(first.textContent); // "アイテム 1"

const last = list.lastElementChild;
console.log(last.textContent);  // "アイテム 3"

// 子要素の数（要素ノードのみ）
console.log(list.childElementCount); // 3

// children.length でも同じ
console.log(list.children.length);   // 3

const list = document.getElementById("list");

// firstChild: 改行+空白のテキストノードが返る可能性
console.log(list.firstChild);         // #text（改行+空白）
console.log(list.firstChild.nodeType); // 3（テキストノード）

// firstElementChild: 要素ノードのみ
console.log(list.firstElementChild);         // <li>アイテム 1</li>
console.log(list.firstElementChild.nodeType); // 1（要素ノード）

const list = document.getElementById("list");

// 最初の子要素
console.log(list.children[0].textContent); // "アイテム 1"

// 最後の子要素
console.log(list.children[list.children.length - 1].textContent); // "アイテム 3"

// 2番目の子要素
console.log(list.children[1].textContent); // "アイテム 2"

const list = document.getElementById("list");

// :first-child → 最初の子要素
const first = list.querySelector(":first-child");
console.log(first.textContent); // "アイテム 1"

// :last-child → 最後の子要素
const last = list.querySelector(":last-child");
console.log(last.textContent);  // "アイテム 3"

// 特定のタグに限定
const firstLi = list.querySelector("li:first-child");
const lastLi = list.querySelector("li:last-child");

<div id="mixed">
  <h2>見出し</h2>
  <p>段落1</p>
  <p>段落2</p>
</div>

const box = document.getElementById("mixed");

// :first-child → 最初の子要素 = <h2>
console.log(box.querySelector(":first-child").tagName); // "H2"

// p:first-child → 最初の子要素が p か？ → p ではないので null
console.log(box.querySelector("p:first-child")); // null

// p:first-of-type → 最初の p 要素
console.log(box.querySelector("p:first-of-type").textContent); // "段落1"

const empty = document.getElementById("emptyList");

// NG: 子要素がないとエラー
// console.log(empty.firstElementChild.textContent);
// → TypeError: Cannot read properties of null

// OK: null チェック
const first = empty.firstElementChild;
if (first) {
  console.log(first.textContent);
} else {
  console.log("子要素がありません");
}

// OK: オプショナルチェーニング
console.log(empty.firstElementChild?.textContent ?? "子要素なし");

const list = document.getElementById("menu");

// 先頭にクラスを追加
list.firstElementChild?.classList.add("first-item");

// 末尾にクラスを追加
list.lastElementChild?.classList.add("last-item");

#menu li:first-child {
  border-top: none;
}
#menu li:last-child {
  border-bottom: none;
}

const tbody = document.querySelector("#dataTable tbody");

// 最初のデータ行
const firstRow = tbody.firstElementChild;
console.log(firstRow.cells[0].textContent);

// 最後のデータ行
const lastRow = tbody.lastElementChild;
console.log(lastRow.cells[0].textContent);

const breadcrumb = document.querySelector(".breadcrumb");
const lastItem = breadcrumb.lastElementChild;

if (lastItem) {
  // 最後のアイテムはリンクを解除してテキストのみに
  const link = lastItem.querySelector("a");
  if (link) {
    lastItem.textContent = link.textContent;
    lastItem.classList.add("current");
  }
}

const list = document.getElementById("notifications");

// 先頭に新しい通知を追加
const newItem = document.createElement("li");
newItem.textContent = "新しい通知";
list.prepend(newItem);

// 末尾の古い通知を削除（最大5件に制限）
while (list.children.length > 5) {
  list.lastElementChild.remove();
}