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.

nextSiblingNode インターフェイスの読み取り専用プロパティで、指定されたノードの親の childNodes の中で、そのすぐ次のノードを返します。または、指定されたノードが親要素の最後の子要素である場合は null を返します。

メモ: ブラウザーはソースのマークアップにあるホワイトスペースを表すために、文書に Text ノードを挿入します。 そのため、例えば Node.firstChildNode.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①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
nextSibling

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報