JavaScriptで兄弟要素を簡単操作!7つの使い方とサンプルコード

JavaScriptで兄弟要素を操作するサンプルコードの例JS
この記事は約9分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで兄弟要素を操作する方法が身につきます。

使い方や注意点、カスタマイズ方法などを含む7つのサンプルコードを通して、初心者でも理解できるよう徹底解説します。

●JavaScriptで兄弟要素とは

兄弟要素とは、同じ親要素を持つ要素のことを指します。

JavaScriptを使って兄弟要素を操作することで、ウェブページの動的な要素の追加や削除、スタイル変更などが可能になります。

○兄弟要素の基本

JavaScriptでは、次の兄弟要素を取得するにはnextElementSibling、前の兄弟要素を取得するにはpreviousElementSiblingを使用します。

また、親要素から子要素を取得する場合は、childrenを利用できます。

●JavaScriptで兄弟要素を操作する方法

○サンプルコード1:nextElementSiblingを使う

HTML

<ul>
  <li id="item1">Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript

const item1 = document.getElementById('item1');
const item2 = item1.nextElementSibling;

console.log(item2.textContent); // "Item 2"が出力されます

上記のサンプルコードでは、nextElementSiblingを使ってitem1の次の兄弟要素を取得し、その内容をコンソールに出力しています。

○サンプルコード2:previousElementSiblingを使う

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li id="item3">Item 3</li>
</ul>

JavaScript

const item3 = document.getElementById('item3');
const item2 = item3.previousElementSibling;

console.log(item2.textContent); // "Item 2"が出力されます

このサンプルコードでは、previousElementSiblingを使ってitem3の前の兄弟要素を取得し、その内容をコンソールに出力しています。

○サンプルコード3:親要素から子要素を取得する

HTML

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript

const list = document.getElementById('list');
const items = list.children;

console.log(items[1].textContent); // "Item 2"が出力されます

上記のコードでは、childrenプロパティを使って親要素listから子要素を取得し、配列のようにアクセスしています。

○サンプルコード4:兄弟要素間のスタイル変更

HTML

<button id="button">Click me!</button>
<p>Paragraph 1</p>
<p id="target">Paragraph 2</p>
<p>Paragraph 3</p>

JavaScript

const button = document.getElementById('button');
const target = document.getElementById('target');

button.addEventListener('click', () => {
  const prev = target.previousElementSibling;
  const next = target.nextElementSibling;

  prev.style.color = 'red';
  next.style.color = 'blue';
});

このサンプルコードでは、ボタンがクリックされたときに、対象の段落の前後の兄弟要素の色を変更しています。

●応用例とサンプルコード

○サンプルコード5:兄弟要素を使ったタブ切り替え

HTML

<div class="tabs">
  <button class="tab" id="tab1">Tab 1</button>
  <button class="tab" id="tab2">Tab 2</button>
  <button class="tab" id="tab3">Tab 3</button>
</div>
<div class="contents">
  <div id="content1">Content 1</div>
  <div id="content2" style="display:none;">Content 2</div>
  <div id="content3" style="display:none;">Content 3</div>
</div>

JavaScript

const tabs = document.getElementsByClassName('tab');

for (const tab of tabs) {
  tab.addEventListener('click', (event) => {
    const id = event.target.id.replace('tab', 'content');
    const content = document.getElementById(id);

    const siblings = content.parentElement.children;
    for (const sibling of siblings) {
      sibling.style.display = 'none';
    }

    content.style.display = 'block';
  });
}

上記のサンプルコードでは、タブがクリックされたときに対応するコンテンツを表示し、その他の兄弟要素を非表示にするタブ切り替え機能を実装しています。

○サンプルコード6:兄弟要素を使ったアコーディオンメニュー

HTML

<div class="accordion">
  <h3>Section 1</h3>
  <div>Content 1</div>
  <h3>Section 2</h3>
  <div>Content 2</div>
  <h3>Section 3</h3>
  <div>Content 3</div>
</div>

JavaScript

const sections = document.querySelectorAll('.accordion > h3');

for (const section of sections) {
  section.addEventListener('click', () => {
    const content = section.nextElementSibling;
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
  });
}

このサンプルコードでは、セクションのタイトルがクリックされたときに、その直後の兄弟要素であるコンテンツを表示・非表示に切り替えるアコーディオンメニューを実装しています。

○サンプルコード7:兄弟要素を使ったギャラリー

HTML

<div class="gallery">
  <img src="image1.jpg" class="thumbnail">
  <img src="image2.jpg" class="thumbnail" style="display:none;">
  <img src="image3.jpg" class="thumbnail" style="display:none;">
  <button id="prev">Previous</button>
  <button id="next">Next</button>
</div>

JavaScript

const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
const thumbnails = document.getElementsByClassName('thumbnail');

let currentIndex = 0;

prevButton.addEventListener('click', () => {
  thumbnails[currentIndex].style.display = 'none';
  currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
  thumbnails[currentIndex].style.display = 'block';
});

nextButton.addEventListener('click', () => {
  thumbnails[currentIndex].style.display = 'none';
  currentIndex = (currentIndex + 1) % thumbnails.length;
  thumbnails[currentIndex].style.display = 'block';
});

上記のサンプルコードでは、PreviousボタンとNextボタンがクリックされたときに、現在表示されている画像を非表示にし、前後の兄弟要素である画像を表示するギャラリーを実装しています。

まとめ

この記事では、JavaScriptで兄弟要素を扱う方法とその応用例を紹介しました。

サンプルコードを参考に、Webページに兄弟要素を使った機能を追加してみてください。