Element.nextElementSibling - 次の要素を取得する

投稿日: / 更新日:

JavaScriptの、ElementオブジェクトのnextElementSiblingは次の要素を取得するプロパティです。

説明

ElementオブジェクトのnextElementSiblingプロパティは、次の要素を含みます。「次」とは具体的に、同じ親要素を持って隣接する次の要素です。テキストノード、コメントノードは含みません。次の要素がない場合、nullが返ります。

<ul>
	<li>要素1</li>
	<li id="target">要素2</li>
	<li>要素3</li>
</ul>
// 2つ目のli要素を取得
var liElement = document.getElementById( "target" ) ;

// 次の要素を取得 ( → <li>要素3</li> )
var nextElementSibling = liElement.nextElementSibling ;

例えば、2つ目のli要素のnextElementSiblingプロパティには、3つ目のli要素が含まれています。ul要素という同じ要素を親に持つ、次の位置に隣接する要素ですよね。3つ目の要素のnextElementSiblingプロパティには、次の要素がないのでnullが含まれます。

似たプロパティにnextSiblingがあります。nextSiblingとnextElementSiblingの違いは、「取得するのにテキストノード、コメントノードを考慮するか否か」です。同じul要素で見てみましょう。

<ul>
	<li>要素1</li>
	<li id="target">要素2</li>↓
	<li>要素3</li>
</ul>
// 2つ目のli要素を取得
var liElement = document.getElementById( "target" ) ;

// 次の要素を取得 ( → テキストノード (改行とタブ文字) )
var nextSibling = liElement.nextSibling ;

2つ目のli要素のnextSiblingプロパティは、3つ目のli要素ではありません。何故なら、2つ目のli要素と3つ目のli要素の間には改行とタブ文字が存在するからです。nextSiblingプロパティには、テキストノードとコメントノードを無視しないので、この改行とタブ文字を次のノードとして認識するわけです。

もしも2つ目と3つ目のli要素の間に何も文字がなければ、nextSiblingとnextElementSiblingプロパティの内容は同じになります。要素だけが必要となる場合、nextElementSiblingプロパティは有用です。

サンプルコード

<ul>
	<li>要素1</li>
	<li id="target">要素2</li>
	<li>要素3</li>
</ul>
// li要素を取得
var liElement = document.getElementById( "target" ) ;

// 次の要素を取得 ( → <li>要素3</li> )
var nextElementSibling = liElement.nextElementSibling ;

デモ

2つ目のli要素のnextElementSiblingプロパティを取得して表示します。コンソールでオブジェクトの中身を確認できます。

構文

readonly Element nextElementSibling = Element.nextElementSibling

返り値

項目説明
nextElementSibling次の要素。コメントノード、テキストノードは無視される。

関連項目

外部リンク