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.

firstChildNode インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は 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
# ref-for-dom-node-firstchild①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
firstChild

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報