HTML要素.nextElementSibling / previousElementSibling

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

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

sample_nextElementSibling.html

<ul id="list">
	<li id="rei">綾波レイ</li>
	<li id="shinji">碇シンジ</li>
	<li id="asuka">惣流アスカ</li>
	<li id="misato">葛城ミサト</li>
	<li id="kaworu">渚カヲル</li>
</ul>
<div id="accordion">
	<button class="acc-btn">NERV – 東京-3</button>
	<div class="acc-panel" style="display:none;">汎用人型決戦兵器エヴァンゲリオンの運用組織です。</div>
	<button class="acc-btn">使徒について</button>
	<div class="acc-panel" style="display:none;">第3の使徒から第18の使徒まで存在します。</div>
</div>

sample_nextElementSibling.js

// パターン1: nextElementSibling / previousElementSibling の基本
var shinji = document.getElementById("shinji");
console.log(shinji.nextElementSibling.textContent);     // 『惣流アスカ』と出力されます。
console.log(shinji.previousElementSibling.textContent); // 『綾波レイ』と出力されます。

// パターン2: 端の要素ではnullが返される
var rei = document.getElementById("rei");
console.log(rei.previousElementSibling); // 前の兄弟がないため『null』が返されます。
var kaworu = document.getElementById("kaworu");
console.log(kaworu.nextElementSibling);  // 次の兄弟がないため『null』が返されます。

// パターン3: nextSiblingとの違い（テキストノードを含む）
console.log(rei.nextSibling.nodeType); // テキストノード（改行）の場合は『3』が返されます。
console.log(rei.nextElementSibling.nodeType); // HTML要素の場合は『1』が返されます。

// パターン4: アコーディオンメニューの実装
// ボタンの直後にある兄弟要素のパネルを開閉します。
var accBtns = document.querySelectorAll(".acc-btn");
accBtns.forEach(function(btn) {
	btn.addEventListener("click", function() {
		var panel = btn.nextElementSibling; // ボタンの直後にある div.acc-panel を取得します。
		if (panel.style.display === "none") {
			panel.style.display = "block";
		} else {
			panel.style.display = "none";
		}
	});
});

サンプルページはこちら

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

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

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