blob: f310d8e4560f6737941367341efb3c44a88414aa (
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
|
---
title: Node.nextSibling
slug: Web/API/Node/nextSibling
tags:
- プロパティ
- リファレンス
- 読み取り専用
browser-compat: api.Node.nextSibling
translation_of: Web/API/Node/nextSibling
---
{{APIRef("DOM")}}
**`nextSibling`** は {{domxref("Node")}} インターフェイスの読み取り専用プロパティで、指定されたノードの親の {{domxref("Node.childNodes","childNodes")}} の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は `null` を返します。
> **Note:** ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に {{domxref("Text")}} ノードを挿入します。
> そのため、例えば [`Node.firstChild`](/ja/docs/Web/API/Node/firstChild) や [`Node.previousSibling`](/ja/docs/Web/API/Node/previousSibling) を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。
>
> [DOM でのホワイトスペース](/ja/docs/Web/API/Document_Object_Model/Whitespace)の記事に、この動作に関する詳しい情報があります。
>
> {{domxref("Element.nextElementSibling")}} を使用すると、ホワイトスペースのノードや要素間のテキスト、コメントなどを飛ばして次の要素を取得することができます。
>
> 子ノードのリストで反対方向に移動する場合は、 [Node.previousSibling](/ja/docs/Web/API/Node/previousSibling) を使用してください。
## 値
現在のノードの次の兄弟ノードを表す {{domxref("Node")}}、または存在しない場合は `null` です。
## 例
```html
<div id="div-1">こちらは div-1 です。</div>
<div id="div-2">こちらは div-2 です。</div>
<br/>
<output><em>計算結果がありません。</em></output>
```
```js
let el = document.getElementById('div-1').nextSibling,
i = 1;
let result = "div-1 の兄弟要素:<br/>";
while (el) {
result += i + '. ' + el.nodeName+"<br/>";
el = el.nextSibling;
i++;
}
const output = document.getElementsByTagName("output")[0];
output.innerHTML = result;
```
{{ EmbedLiveSample("Example", "100%", 500)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{domxref("Element.nextElementSibling")}}
- {{domxref("Node.previousSibling")}}
|
