このページでは、element.firstChild と element.lastChild の基本的な使い方から、実際のコード例や注意点について詳しく解説します。

• element.firstChildとは？
• element.lastChildとは？
• firstChildとchildNodesの違い
• 実際の使用例
• よくある問題と対処法

element.firstChildとは？

element.firstChild は、指定したDOM要素（element）の最初の子ノードを返します。子ノードには、要素ノード（Element）、テキストノード（Text）、コメントノード（Comment）などが含まれます。

例:

<div id="example">
    <span>最初の要素ノード</span>
    テキストノード
    <!-- コメントノード -->
</div>

const div = document.getElementById("example");
console.log(div.firstChild); // 結果: <span>最初の要素ノード</span>

ただし、最初の子がテキストノードやコメントノードの場合、それが返されます。

element.lastChildとは？

element.lastChild は、指定したDOM要素の最後の子ノードを返します。これも firstChild 同様に、要素ノード、テキストノード、コメントノードが含まれます。

例:

<div id="example">
    <span>最初の要素ノード</span>
    テキストノード
    <!-- 最後のコメントノード -->
</div>

const div = document.getElementById("example");
console.log(div.lastChild); // 結果: <!-- 最後のコメントノード -->

firstChildとchildNodesの違い

firstChild や lastChild は、単一のノードを返します。一方で childNodes は、すべての子ノードを配列のような形で返します。

例:

<div id="example">
    <span>要素ノード1</span>
    テキストノード
    <span>要素ノード2</span>
</div>

const div = document.getElementById("example");
console.log(div.firstChild);  // 最初の子ノード: <span>要素ノード1</span>
console.log(div.childNodes); // すべての子ノード: NodeList(3) [<span>, テキスト, <span>]

実際の使用例

子ノードが要素ノードの場合

<ul id="list">
    <li>最初のリスト項目</li>
    <li>最後のリスト項目</li>
</ul>

const list = document.getElementById("list");
console.log(list.firstChild); // 結果: <li>最初のリスト項目</li>
console.log(list.lastChild);  // 結果: <li>最後のリスト項目</li>

テキストノードが含まれる場合

<div id="example">
    <!-- コメント -->
    テキストノード
    <span>要素ノード</span>
</div>

const div = document.getElementById("example");
console.log(div.firstChild); // 結果: コメントノード
console.log(div.lastChild);  // 結果: <span>要素ノード</span>

よくある問題と対処法

1. 予期せぬテキストノードの取得: 子要素の間に改行や空白があると、それらがテキストノードとして扱われます。
解決策: Node.nodeType を使用してノードタイプを確認する。

const div = document.getElementById("example");
if (div.firstChild.nodeType === Node.ELEMENT_NODE) {
    console.log("最初の子ノードは要素です。");
} else {
    console.log("最初の子ノードは要素ではありません。");
}

2. 意図しないノードの操作: firstChild や lastChild を使って変更を加えると、不要なノードが影響を受ける可能性があります。
解決策: 明確に対象ノードを特定する条件を追加してください。

これで、element.firstChild と element.lastChild の基本的な使用方法や注意点を理解する助けになれば幸いです。