概要
ノードのツリーの中で最初の子ノード、もしくは子ノードがなければ null を返します。ノードが Document の場合は、その直接の子のリスト内の最初のノードを返します。
構文
var childNode = node.firstChild;
childNode: node の最初の子ノードがあればその参照、無い場合はnull
例
次の例では firstChild の使用方法と、このプロパティを使用すると空白ノードがどのように影響するかをデモンストレーションしています。Gecko DOM に於ける空白の扱われ方についてより多くの情報を得るために、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' を表示するでしょう。