.firstChild

https://developer.mozilla.org/en-US/docs/Web/API/Node.firstChild

ツリー上での、ノードの最初の子要素を返します。ノードが子を持たなければnullが返ります。ノードがDocumentの場合、直接子ノードリストの最初のノードを返します。

文法

var childNode = node.firstChild;

childNodeは、最初の子ノードの参照になります。もし、子ノードが無ければnullになります。

例

このデモでは、firstChildを使用すると、空白のテキストノードがプロパティの参照の邪魔になるかもしれません。詳細は、ホワイトスペースの扱い(作成中)を確認してください。

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

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

上記の場合、アラートは'#text'を表示してしまいます。これは、空白のテキストノードが<p>タグの終端と<span>の間に挿入されているためです。 1つまたは複数空白、タブは、#textノードの挿入を発生させてしまいます。

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

下記のようにソースコードから、これらの空白を取り除くと、#textは差し込まれず、span要素がP要素の第1子要素になります。

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

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

このようにすれば、アラートは'SPAN'と表示します。

仕様

デモ

<!DOCTYPE html>
<html>
<head>
  <style></style>
</head>
<body>

<input type="button" value="クリック!(空白有り)" id="btn1" />
<input type="button" value="クリック!(空白無し)" id="btn2" />
<p id="para-01">
  <span>第一子要素(?)SAPN(空白有り)</span>
</p>

<p id="para-02"><span>第一子要素SAPN(空白無し)</span></p>

<script>
  var btn1 = document.getElementById('btn1');
  var btn2 = document.getElementById('btn2');
  var p01 = document.getElementById('para-01');
  var p02 = document.getElementById('para-02');
  btn1.onclick = function(){
    alert(p01.firstChild.nodeName);
  }
  btn2.onclick = function(){
    alert(p02.firstChild.nodeName);
  }
</script>
</body>
</html>

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

特定のブラウザに特化しすぎている情報やあまりにも古い情報、または試験的に導入されているようなAPIや機能については、省略していることがあります。
例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。