HTML DOM nextSibling 属性

HTML DOM Element オブジェクト

nextSibling属性は要素ノードの次に続く兄弟ノード（テキストノード、コメントノード、改行、スペース、テキストなどが含まれます）を返します。

次の同級が存在しない場合、この属性はnull。

スペースはテキストとして、テキストはノードとして、コメントもノードとして扱われます。

nextSiblingが#textや#commentノードを返す問題を避けるために、nextElementSibling要素ノードのみを返します。

使用previousSibling属性は指定されたノードが同一木構造の上位に位置する前のノードを返します。

使用childNodes属性は指定されたノードのいかなる子ノードも返します。

文法：

node.nextSibling

<div　id="div-1">Here　is　div-1</div>
<div　id="div-2">Here　is　div-2</div>
<script>
var　x　=　document.querySelector("#div-1").nextSibling.nodeName;
document.getElementById("result").innerHTML　=　x;
</script>

ただし、DIV間のスペースを削除すると、返り値は#text：ではなくなります。

<div　id="div-1">Here　is　div-1</div><div　id="div-2">Here　is　div-2</div>
<script>
var　x　=　document.querySelector("#div-1").nextSibling.innerHTML;
document.getElementById("result").innerHTML　=　x;
</script>

ブラウザの互換性

すべてのブラウザが完全にnextSibling属性をサポートしています：

技術的詳細

関連参考

HTML DOM 参考：node .childNodes属性

HTML DOM 参考：node .firstChild属性

HTML DOM 参考：node .lastChild属性

HTML DOM 参考：node .parentNode属性

HTML DOM 参考：node .previousSibling属性

HTML DOM 参考：node .nodeName属性

HTML DOM Element オブジェクト