Node.nextSibling

Node.nextSibling という読み取り専用プロパティは指定したノードの親の子ノードリスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は null を返します。

構文

nextNode = node.nextSibling

注記

Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば Node.firstChildNode.previousSibling で得られるノードが、作者が取得しようとした実際の要素ではなく、空白のテキストノードを参照していることがあります。

より多くの情報を得るには『DOM 中の空白文字』と『W3C DOM 3 FAQ: Why are some Text nodes empty?』を参照してください。

 
Element.nextElementSibling は空白ノードを飛ばして次の要素を得るのに使われます。

<div id="div-01">Here is div-01</div>
<div id="div-02">Here is div-02</div>

<script type="text/javascript">
var el = document.getElementById('div-01').nextSibling,
    i = 1;

console.log('Siblings of div-01:');

while (el) {
  console.log(i + '. ' + el.nodeName);
  el = el.nextSibling;
  i++;
}

</script>

/**************************************************
  The following is written to the console as it loads:

     Siblings of div-01

      1. #text
      2. DIV
      3. #text
      4. SCRIPT

**************************************************/

上の例で、#text ノードがタグ間のマークアップ内に (つまり、 要素の閉じタグと次の開始タグの間) 空白がある DOM に挿入されているのが見られます。 document.write 文で挿入された要素の間には空白が作成されません。

DOM にテキストノードが入りうるのは DOM が nextSibling を使って横断される時に許可されます。注記のセクションのリソースを見てください。

仕様

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
nextSiblingChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 5.5Opera 完全対応 7Safari 完全対応 1.1WebView Android 完全対応 1Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報