Node.nextSibling
という読み取り専用プロパティは指定したノードの親の子ノード
リスト内ですぐ次にあるノードを返し、指定したノードがリストで最後の場合は null
を返します。
構文
nextNode = node.nextSibling
注記
Geckoベースのブラウザーはソースマークアップの中で空白を表現するためにテキストノードをドキュメントに挿入します。ですので、例えば Node.firstChild
や Node.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
を使って横断される時に許可されます。注記のセクションのリソースを見てください。
仕様
ブラウザ実装状況
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.