HTML要素.nextElementSibling / previousElementSibling 対応: DOM Level 1（1998）

HTML要素の兄弟要素（同じ親を持つ前後のHTML要素）を取得するプロパティです。次の兄弟要素や前の兄弟要素にアクセスできます。

構文

// 次の兄弟要素を取得します。
var next = element.nextElementSibling;

// 前の兄弟要素を取得します。
var prev = element.previousElementSibling;

プロパティ一覧

プロパティ	概要
nextElementSibling	次の兄弟要素（HTML要素）を返します。次の兄弟要素が存在しない場合は『null』を返します。
previousElementSibling	前の兄弟要素（HTML要素）を返します。前の兄弟要素が存在しない場合は『null』を返します。
nextSibling	次の兄弟ノードを返します。テキストノードやコメントノードも対象に含まれます。
previousSibling	前の兄弟ノードを返します。テキストノードやコメントノードも対象に含まれます。

サンプルコード

<ul id="list">
	<li id="item1">項目1</li>
	<li id="item2">項目2</li>
	<li id="item3">項目3</li>
</ul>

var item2 = document.querySelector("#item2");

// 次の兄弟要素を取得します。
console.log(item2.nextElementSibling.textContent); // 『項目3』と出力されます。

// 前の兄弟要素を取得します。
console.log(item2.previousElementSibling.textContent); // 『項目1』と出力されます。

// 最初のHTML要素には前の兄弟要素が存在しません。
var item1 = document.querySelector("#item1");
console.log(item1.previousElementSibling); // 『null』が返されます。

// 最後のHTML要素には次の兄弟要素が存在しません。
var item3 = document.querySelector("#item3");
console.log(item3.nextElementSibling); // 『null』が返されます。

// nextSibling はテキストノードが返される場合があります。
console.log(item1.nextSibling); // 改行と空白のテキストノードが返されます。

概要

『HTML要素.nextElementSibling』と『HTML要素.previousElementSibling』は、同じ親HTML要素を持つ兄弟要素の中から前後のHTML要素を取得するプロパティです。『nextSibling』『previousSibling』はテキストノードやコメントノードも返しますが、『nextElementSibling』『previousElementSibling』はHTML要素のみを返すため、通常のDOM操作ではこちらを使う方が安全です。

これらのプロパティと『HTML要素.parentNode』『HTML要素.children』を組み合わせることで、DOMツリーを自在に移動できます。例えば、クリックされたHTML要素の次の兄弟要素を表示・非表示に切り替えるアコーディオンメニューの実装などに活用できます。

兄弟要素ではなく祖先方向に特定のHTML要素を探したい場合は『HTML要素.closest()』、子孫方向に探したい場合は『HTML要素.querySelector()』を使用してください。