【JavaScript】隣接する次の要素を取得する【nextElementSibling】

こんにちは、Ryohei（@ityryohei）です！

JavaScriptで隣接する次の要素を取得する「nextElementSibling」のご紹介です。

「nextElementSibling」は、指定したElementオブジェクトの次の要素を取得するプロパティです。

本記事では「nextElementSibling」のプロパティの説明や注意点と、使い方についてサンプルを交えながらお話していきたいと思います。

本記事の内容

• nextElementSiblingとは
• nextElementSiblingの記述方法
• nextElementSiblingで次の要素を取得する

では、解説していきます。

nextElementSiblingとは

冒頭で少しお話した通り「nextElementSibling」は指定したElementオブジェクトの次の要素を取得することができるプロパティです。

「nextElementSibling」で取得できるのは、テキストノードやコメントノードを除く同じ親要素を持つ兄弟要素となります。

例えば、下記のような２つ並んだリストがあるとします。

<ul id="list1">
  <li</li>
  <li></li>
  <li></li>
</ul>
<ul id="list2">
  <li></li>
  <li></li>
  <li></li>
</ul>

「list1」のidを持つ「ul」に対して「nextElementSibling」を実行したとすると、取得することができるのは「list2」の要素になります。「list1」と「list2」の間に改行や空白や文字等のテキストやコメントノードが入っていた場合、それらは無視され、次の兄弟要素である「list2」を取得することができます。

nextElementSiblingの記述方法

「nextElementSibling」はElementオブジェクトのプロパティになります。下記のように記述して実行することができます。

//要素指定
let element = document.getElementById('element');
//次の兄弟要素取得
element.nextElementSibling; 

上記の場合、「element」の「id」属性を持つ要素と隣接する次の兄弟要素が取得されます。

nextElementSiblingで次の要素を取得する

では、試しにnextElementSiblingで次の要素を取得してみます。「target」の「id」属性を持つli要素を指定して、隣接している次のli要素を取得します。

HTML

<ul>
  <li id="target"></li>
  <li></li>
</ul>

JavaScript

let element = document.getElementById('target');
element.nextElementSibling;

//取得結果
<li>

無事「target」の次の要素であるli要素が取得できたかと思います。

まとめ

最後に「nextElementSibling」の記述方法と注意点をまとめます。

記述方法

//要素指定
let element = document.getElementById('element');
//次の兄弟要素取得
element.nextElementSibling; 

注意点

• nextElementSiblingで取得できるのはテキストやコメント以外のノード
• nextElementSiblingで取得できるのは同じ親を持つ兄弟要素

「nextElementSibling」を使用する際は上記に関してご注意いただければと思います。

もし、JavaScriptをしっかりと勉強したい方は下記の参考書がおすすめです。基礎から応用まで多くのサンプルを用いて解説されています。ページ数は多いですが、その分内容も濃いです。腰を据えて学びたい方に最良の一冊です。

以上、JavaScriptで隣接する次の要素を取得することができる「nextElementSibling」のご紹介でした！