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 Standard
# ref-for-dom-node-nextsibling①

ブラウザーの互換性

BCD tables only load in the browser

関連情報