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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 12Firefox ? IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile ? Firefox Android ? Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: wbamberg, Uemmra3, fscholz, AshfaqHossain, ethertank, Sheppy, Mgjbot, Ryotakano
最終更新者: wbamberg,