指定したノードのすぐ後に続くノードを返します。 後に続くというのは親ノードのchildNodesリスト内のこととみなされます。 また、指定したノードがリストの最後のノードである場合は、nullが返されます。

文法

nextNode = node.nextSibling

注意事項

Geckoベースを含むいくつかのブラウザは、ソースコード上のマークアップ内の空白をテキストノードとしてdocument上に差し込みます。 そのため例えば、Node.firstChild()またはNode.previousSibling()は、 目的の要素を取得したいという意図に反して、空白のテキストノードを参照してしまうかもしれません。

詳細は、Whitespace in the DOM、 または、Document Object Model FAQを確認してください。

例

<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;

document.write('<p>Siblings of div-01</p><ol>');

while (el) {
  document.write('<li>' + el.nodeName + '</li>');
  el = el.nextSibling;
}

document.write('</ol>');
</script>

/**************************************************
  下記が読み込み時にページ上へ書きだされます:

     Siblings of div-01

      1. #text
      2. DIV
      3. #text
      4. SCRIPT
      5. P
      6. OL
**************************************************/

上記の例で、ソースコード上でタグの間の空白の箇所で、#textノードとしてDOM内に差し込まれていることに気づくと思います。 (要素の閉じタグの後ろ、その次の開きタグの前) document.writeによって挿入された要素の間には、空白の#textノードは作成されません。

nextSiblingを使用して、DOMを扱う際にはDOM内にテキストノードが含まれる可能性を考慮しなければいけません。 このページ内の「注意事項」も確認してください。

仕様

• DOM Level 1 Core: nextSibling
• DOM Level 2 Core: nextSibling

関連項目

• Element.nextElementSibling

 Back to top