HTML DOM Element firstChild属性
- 前のページ dir
- 次のページ firstElementChild
- 上一階層に戻る HTML DOM Elements オブジェクト
定義と用法
firstChild 属性は指定されたノードの最初の子ノードをNodeオブジェクトとして返します。
firstChild 属性は読み取り専用です。
firstChild 属性と childNodes[0] 同じです。
注意
firstChild 最初の子ノードを返します：要素ノード、テキストノード、またはコメントノード。
要素間の空白もテキストノードです。
代替案：
firstElementChild属性 - firstElementChild 属性は最初の子要素（テキストノードやコメントノードを無視して）を返します。
参照してください：
ノード属性
インスタンス
例 1
<ul>要素の最初の子要素のHTML内容を返します：
document.getElementById("myList").firstChild.innerHTML;
例 2
<select>要素の最初の子要素のテキストを取得します：
let text = document.getElementById("mySelect").firstChild.text;
例 3
スペースの干渉を示す例です。
「myDIV」の最初の子要素のノード名を取得しようと試みます：
<div id="myDIV">
<p>Looks like first child</p>
<p>Looks like last Child</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>
例4
しかし、ソースからスペースを削除すると、「myDIV」には#textノードがありません：
<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>
HTMLノードと要素
HTML HTML DOM（ドキュメントオブジェクトモデル）では、HTMLドキュメントは（またはない）子ノードを持つノードの集合です。
ノード要素ノード、テキストノード、およびコメントノードです。
要素要素間の空白もテキストノードです。
要素はただの要素ノードです。
子ノードと子要素
childNodes 返します子ノード（要素ノード、テキストノード、およびコメントノード）。
children 返します子要素（テキストやコメントノードではなく）。
firstChild と firstElementChild
firstChild 最初のものを返します子ノード（要素ノード、テキストノード、またはコメントノード）。要素間の空白もテキストノードです。
firstElementChild 最初のものを返します子要素（テキストノードやコメントノードは返しません）。
lastChild と lastElementChild
lastChild 最後のものを返します子ノード（要素ノード、テキストノード、またはコメントノード）。要素間の空白もテキストノードです。
lastElementChild 最後のものを返します子要素（テキストノードやコメントノードは返しません）。
構文
element.firstChild
または
node.firstChild
返り値
| タイプ | 説明 |
|---|---|
| ノード |
ノードの最初の子ノードです。 子がいない場合、nullを返します。 |
ブラウザのサポート
element.firstChild DOMレベル1（1998）の機能です。
すべてのブラウザで完全にサポートされています：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| サポート | 9-11 | サポート | サポート | サポート | サポート |
- 前のページ dir
- 次のページ firstElementChild
- 上一階層に戻る HTML DOM Elements オブジェクト
