Node: firstChild プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

firstChild は Node インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は null を返します。

このノードが Document であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。

メモ: このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。 Text または Comment ノードになることがあります。 他の要素の子である最初の Element を取得したい場合は、 Element.firstElementChild を使用することを検討してください。

値

Node、または存在しなければ null。

例

次の例では firstChild の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかを示しています。

html
<p id="para-01">
  <span>最初の span</span>
</p>

<script>
  const p01 = document.getElementById("para-01");
  console.log(p01.firstChild.nodeName);
</script>

上記の例ではコンソールに '#text' と表示されます。開始タグ <p> の末尾と <span> タグとの間にある空白を調整するためにテキストノードが挿入されているためです。あらゆるホワイトスペースは、単一の空白から複数のスペース、改行、タブに至るまで、 1 つの #text ノードを生成します。

#text ノードはもう 1 つ、閉じタグ </span> と </p> の間に挿入されます。

ホワイトスペースをソースから取り除くと、 #text ノードは挿入されず、 span 要素がその段落の最初の子になります。

html
<p id="para-01"><span>最初の span</span></p>

<script>
  const p01 = document.getElementById("para-01");
  console.log(p01.firstChild.nodeName);
</script>

コンソールには 'SPAN' と表示されるようになります。

node.firstChild が #text や #comment ノードを返す問題を回避するには、 Element.firstElementChild を使用すると最初の要素ノードのみを返すことができます。

仕様書

Specification
DOM Standard
# ref-for-dom-node-firstchild①

ブラウザーの互換性

BCD tables only load in the browser

関連情報