この記事では、JavaScriptの、previousElementSiblingとnextElementSiblingについて解説します。
簡単なサンプルコードも紹介します。
previousElementSibling・nextElementSiblingとは？使い方
previousElementSiblingは「指定した要素の1つ前の要素を取得」します。
nextElementSiblingは「指定した要素の1つ後の要素を取得」します。
以下のサンプルのように使うことができます。
サンプルコード
下記のHTMLで、<li id="about_b">Bについて</li>の前後の要素を取得します。
<div id="block">
<p>ミーティングの議題</p>
<ul id="list">
<li id="about_a">Aについて</li>
<li id="about_b">Bについて</li>
<li id="about_c">Cについて</li>
</ul>
</div>var about_b = document.getElementById('about_b');
console.log(about_b.nextElementSibling);
// => <li id="about_c">
console.log(about_b.previousElementSibling);
// => <li id="about_a">また、該当する要素がない場合にはnullを返します。
<ul id="list">の前後の要素を取得しようとすると前の要素は<p>ですが、次の要素はないのでnullとなります。
var list = document.getElementById('list');
console.log(list.previousElementSibling);
// => <p>
console.log(list.nextElementSibling);
// => null