JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで特定のノードの最初・最後の子ノードを取得する方法

JavaScriptでは、特定のノードの最初の子ノードと最後の子ノードを取得するために、それぞれ firstChild と lastChild プロパティが用意されています。この記事では、両者の基本的な使い方をサンプルコードと出力結果付きでわかりやすく解説します。

firstChild とは

firstChild は、指定したノードの最初の子ノードを返すプロパティです。なお、テキストノードやコメントノードも「子ノード」に含まれるため、HTMLの書き方によっては意図しないノードが返ることがあります（詳細は後述の注意点を参照）。

構文

node.firstChild;

使用例

次の例では、ul要素の中に3つのli要素（Tesla、Spacex、Solarcity）があります。ここで firstChild を使って最初の子ノードを取得し、その内容を出力として表示しています。

<html>
<body>
<ul id="list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<p id="first"></p>
<script>
   var list = document.getElementById("list").firstChild.innerHTML;
   document.getElementById("first").innerHTML = list;
</script>
</body>
</html>

出力結果

Tesla
Spacex
Solarcity

Tesla

lastChild とは

lastChild は、指定したノードの最後の子ノードを返すプロパティです。使い方は firstChild とまったく同じで、取得対象が「最後の子」になる点のみが異なります。

構文

node.lastChild;

使用例

先ほどと同じリストに対して、今度は lastChild を使って最後の子ノードを取得し、その内容を出力として表示しています。

<html>
<body>
<ul id="list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<p id="first"></p>
<script>
   var list = document.getElementById("list").lastChild.innerHTML;
   document.getElementById("first").innerHTML = list;
</script>
</body>
</html>

出力結果

Tesla
Spacex
Solarcity

Solarcity

実務での注意点：テキストノードへの対策

firstChild や lastChild は、タグ間の空白や改行もテキストノードとして扱うという特徴があります。そのため、次のようにHTMLを見やすく整形すると、期待した要素ではなく空のテキストノードが返されてしまうことがあります。

<ul id="list">
  <li>Tesla</li>
  <li>Spacex</li>
</ul>

このような問題を避け、要素ノードだけを確実に取得したい場合は、代わりに以下のプロパティを使うのがおすすめです。

  • firstElementChild：最初の要素の子ノードを返す
  • lastElementChild：最後の要素の子ノードを返す
var firstItem = document.getElementById("list").firstElementChild.innerHTML; // "Tesla"
var lastItem  = document.getElementById("list").lastElementChild.innerHTML;  // "Solarcity"

モダンブラウザではすべて利用可能なため、実務のコーディングでは firstElementChild / lastElementChild を優先的に使うことで、より安全で可読性の高いコードになります。

  1. lengthプロパティを使わずにノードリストから最後の要素を取得する方法【jQueryの:lastセレクタ】

    JavaScriptでノードリストやDOM要素のコレクションから最後のアイテムを取得する場合、一般的には length プロパティで要素数を調べてインデックスを指定します。しかし、jQueryの :last セレクタを使えば、要素数を意識することなく、よりシンプルに最後の要素を取得できます。 サンプルとなるテーブル ここでは、次のようなHTMLテーブルを例に説明します。 <table id=demo border=1> <tr> <td>John</td> </tr> <tr> <td>David</td

  2. JavaScriptで子ノードの数を取得する方法

    JavaScriptでは、children.lengthプロパティを使うことで、要素が持つ子ノード（子要素）の数を簡単に取得できます。この記事では、実際のコード例を使って、その基本的な使い方を解説します。children.lengthとはchildrenは、ある要素の子要素（HTMLコレクション）を返すプロパティです。さらに.lengthを付けることで、子要素の総数を数値として取得できます。例えば、<ul>タグの中にある<li>要素の個数を知りたい場合などに便利です。サンプルコード<!DOCTYPE html> <html lang="ja&