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

はじめに
●JavaScriptで兄弟要素とは
- ○兄弟要素の基本
●JavaScriptで兄弟要素を操作する方法
●応用例とサンプルコード
まとめ

はじめに

この記事を読めば、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ボタンがクリックされたときに、現在表示されている画像を非表示にし、前後の兄弟要素である画像を表示するギャラリーを実装しています。