JavaScript

previousElementSibling・nextElementSiblingで前後の要素を取得【JavaScript】

この記事では、JavaScriptの、previousElementSiblingnextElementSiblingについて解説します。

簡単なサンプルコードも紹介します。

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

ウェブつくを支えてくれるスポンサー

  • この記事を書いた人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2021 ウェブつく Powered by AFFINGER5