Node.firstChild

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

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

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

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

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

<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 要素がその段落の最初の子になります。

<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

関連情報