Node: nextSibling プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
nextSibling は Node インターフェイスの読み取り専用プロパティで、指定されたノードの親の childNodes の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は null を返します。
メモ:
ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に Text ノードを挿入します。
そのため、例えば Node.firstChild や Node.previousSibling を使用して得たノードが、取得しようとした実際のノードではなく、ホワイトスペースのテキストノードであることがあります。
DOM でのホワイトスペースの記事に、この動作に関する詳しい情報があります。
Element.nextElementSibling を使用すると、ホワイトスペースのノードや要素間のテキスト、コメントなどを飛ばして次の要素を取得することができます。
子ノードのリストで反対方向に移動する場合は、 Node.previousSibling を使用してください。
値
現在のノードの次の兄弟ノードを表す 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;
let i = 1;
let result = "div-1 の兄弟要素:<br/>";
while (el) {
result += `${i}. ${el.nodeName}<br/>`;
el = el.nextSibling;
i++;
}
const output = document.querySelector("output");
output.innerHTML = result;
仕様書
| Specification |
|---|
| DOM # ref-for-dom-node-nextsibling① |