blob: 504cd9828438277bdd6ff3348a428980be5ea688 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
---
title: Node.firstChild
slug: Web/API/Node/firstChild
tags:
- プロパティ
- リファレンス
browser-compat: api.Node.firstChild
translation_of: Web/API/Node/firstChild
---
{{APIRef("DOM")}}
**`firstChild`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、ツリー内におけるこのノードの最初の子、またはこのノードに子がない場合は `null` を返します。
このノードが {{domxref("Document")}} であった場合は、このプロパティは直接のこのリスト内で最初のノードを返します。
> **Note:** このプロパティはこのノードの最初の子であれば、あらゆる種類のノードを返します。
> {{domxref("Text")}} または {{domxref("Comment")}} ノードになることがあります。
> 他の要素の子である最初の {{domxref("Element")}} を取得したい場合は、 {{domxref("Element.firstElementChild")}} を使用することを検討してください。
## 値
{{domxref("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>
```
上記の例では[コンソール](/ja/docs/Web/API/console)に '#text' と表示されます。開始タグ `<p>` の末尾と `<span>` タグとの間にある空白を調整するためにテキストノードが挿入されているためです。**あらゆる**[ホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)は、単一の空白から複数のスペース、改行、タブに至るまで、 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` ノードを返す問題を回避するには、 {{domxref("Element.firstElementChild")}} を使用すると最初の要素ノードのみを返すことができます。
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{domxref("Element.firstElementChild")}}
- {{domxref("Node.lastChild")}}
|
