--- title: Node.firstChild slug: Web/API/Node/firstChild tags: - DOM - Gecko - Gecko DOM Reference - Node translation_of: Web/API/Node/firstChild ---
{{ApiRef}}

概要

ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。

構文

var childNode = node.firstChild;

例

次の例では firstChild の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、{{Anch("Notes")}} も参照してください。

<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>

上記の例では alert は'#text'を表示します。なぜなら開始タグ <p> の末端と <span> の間にある空白を調整するためにテキストノードが挿入されているからです。どんな 空白、単一スペースから多数のスペース、改行、タブ等々、も #text ノードを挿入することになります。

その他の #text ノードは閉じタグ </span> と </p> の間に挿入されていみます。

もしこの空白がソースから取り除かれれば、#text ノードは挿入されず、span 要素は段落の最初の子ノードとなります。

<p id="para-01"><span>First span</span></p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>

今度は alert は 'SPAN' を表示するでしょう。

仕様書