Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
- トップページ
- JavaScript辞典
- HTML要素.nextElementSibling / previousElementSibling
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); // 改行と空白のテキストノードが返されます。
実行結果
item2.nextElementSibling.textContent; // 項目3 item2.previousElementSibling.textContent; // 項目1 item1.previousElementSibling; // null item3.nextElementSibling; // null
概要
『HTML要素.nextElementSibling』と『HTML要素.previousElementSibling』は、同じ親HTML要素を持つ兄弟要素の中から前後のHTML要素を取得するプロパティです。『nextSibling』『previousSibling』はテキストノードやコメントノードも返しますが、『nextElementSibling』『previousElementSibling』はHTML要素のみを返すため、通常のDOM操作ではこちらを使う方が安全です。
これらのプロパティと『HTML要素.parentNode』『HTML要素.children』を組み合わせることで、DOMツリーを自在に移動できます。例えば、クリックされたHTML要素の次の兄弟要素を表示・非表示に切り替えるアコーディオンメニューの実装などに活用できます。
兄弟要素ではなく祖先方向に特定のHTML要素を探したい場合は『HTML要素.closest()』、子孫方向に探したい場合は『HTML要素.querySelector()』を使用してください。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする