【JavaScript】隣接する前の要素を取得する【previousElementSibling】

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

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

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

本記事では「previousElementSibling」のプロパティの説明や注意点、使い方についてお話していきたいと思います。

本記事の内容

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

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

previousElementSiblingとは

「previousElementSibling」は指定したElementオブジェクトの前の要素を取得するプロパティです。「previousElementSibling」で取得できるのは、テキストノードやコメントノードを除く同じ親要素を持つ兄弟要素となります。もし前の要素が存在しない場合は「null」を返します。

例えば、下記のようなリストがあるとして、「target」属性を持つ要素に「previousElementSibling」を実行してみます。

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

実行結果は下記のようになります。

<li>

同じ「ul」を親に持つ一つ前の「li」要素を取得することができます。

もし、指定した要素の前に要素が存在しないリストがあるとします。その要素を指定して「previousElementSibling」を実行してみます。

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

実行結果は下記のようになります。

null

指定した要素の前に取得できる要素がない場合は「null」を返します。「null」が返されることで、取得する要素がない場合の処理も容易に実装することができますね。

previousElementSiblingの記述方法

「previousElementSibling」はElementオブジェクトのプロパティになります。下記のように記述すると動作します。

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

上記の例では「element」の「id」属性を持つ要素を指定して、指定した要素と隣接する前の兄弟要素を取得することができます。もし、前の要素が存在しない場合は「null」を返します。

previousElementSiblingで前の要素を取得する

では、実際に「previousElementSibling」を使用して、指定した要素の前に存在する要素を取得してみます。「target」の「id」属性を持つ「li」を指定して、隣接する前の「li」を取得します。

HTML

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

JavaScript

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

//取得結果
<li>

上記を実行すると「target」の前の要素である「li」が取得できたかと思います。

まとめ

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

記述方法

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

注意点

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

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

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

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