Element.previousElementSibling - 前の要素を取得する

投稿日: / 更新日:

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

説明

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

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

// 前の要素を取得 ( → <li>要素1</li> )
var previousElementSibling = liElement.previousElementSibling ;

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

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

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

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

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

もしも1つ目、2つ目のli要素の間に何もなければ、previousSiblingとpreviousElementSiblingの内容は同じになるでしょう。

サンプルコード

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

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

デモ

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

構文

readonly Element previousElementSibling = Element.previousElementSibling

返り値

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

関連項目

外部リンク