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

はじめに

JavaScriptで兄弟要素を操作する方法についての詳細な解説をご紹介いたします。

本記事では、使い方や注意点、カスタマイズ方法など、初心者の方にも理解しやすいよう、7つのサンプルコードを交えながら徹底的に説明してまいります。

ウェブ開発において、要素間の関係を理解し、効果的に操作することは非常に重要です。

この記事を通じて、JavaScriptによる兄弟要素の操作スキルを習得し、より洗練されたウェブページの作成につなげていただければ幸いです。

●JavaScriptで兄弟要素とは

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

JavaScriptを利用して兄弟要素を操作することにより、ウェブページ上で動的に要素を追加したり、削除したり、スタイルを変更したりすることが可能となります。

この概念を理解することで、複雑な構造を持つウェブページでも、効率的に要素を操作できるようになります。

兄弟要素の操作は、ユーザーインターフェースの改善やインタラクティブな機能の実装に大きく貢献します。

例えば、ナビゲーションメニューの動的な変更、フォーム要素の連動した振る舞い、アコーディオン形式のコンテンツ表示など、多岐にわたる用途があります。

○兄弟要素の基本

JavaScriptにおいて、次の兄弟要素を取得するためには「nextElementSibling」というプロパティを使用します。

一方、前の兄弟要素を取得する場合は「previousElementSibling」というプロパティを使います。

また、親要素から子要素を取得する際には「children」プロパティが活用できます。

このプロパティを適切に組み合わせることで、DOM（Document Object Model）ツリー内の要素間を自由に移動し、必要な操作を行うことができます。

各プロパティの特徴と使用方法を詳しく見ていきましょう。

この基本的な概念を押さえることで、より複雑な操作にも対応できるようになります。

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

兄弟要素の操作は、ウェブページの動的な変更や、ユーザーインタラクションに応じた表示の制御など、多くの場面で活用されます。

ここでは、具体的な操作方法とそのコード例を通じて、兄弟要素の扱い方を詳しく解説していきます。

これらの操作を習得することで、より柔軟で効果的なウェブアプリケーションの開発が可能となります。

それぞれの方法には特徴があり、状況に応じて適切な手法を選択することが重要です。

○nextElementSiblingを使う

nextElementSiblingプロパティを使用すると、指定した要素の次の兄弟要素を簡単に取得することができます。

このプロパティは、DOM内で隣接する要素をナビゲートする際に非常に便利です。

次のサンプルコードでは、このプロパティを使って「item1」の次の兄弟要素を取得し、その内容をコンソールに出力しています。

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

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

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

このコードを実行すると、コンソールには「Item 2」という文字列が表示されます。

これは、「item1」の次の兄弟要素である「Item 2」のテキスト内容が取得できたことを表しています。

この方法を使うことで、リスト内の要素を順番に処理したり、特定の要素の次の要素に対して操作を行ったりすることが可能になります。

○previousElementSiblingを使う

previousElementSiblingプロパティを使えば、指定した要素の前の兄弟要素を取得することができます。

このプロパティは、DOM内で逆方向に要素をナビゲートする際に役立ちます。

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

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

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

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

このコードを実行すると、コンソールには「Item 2」という文字列が表示されます。

これは、「item3」の前の兄弟要素である「Item 2」のテキスト内容が正しく取得できたことを意味しています。

この方法を使用することで、リストの最後の要素から逆順に処理を行ったり、特定の要素の前の要素に対して操作を行ったりすることができます。

○親要素から子要素を取得する

childrenプロパティを使用すると、親要素から全ての子要素を取得することができます。

このプロパティは、親子関係にある要素群を一括で操作する際に非常に便利です。

次のサンプルコードでは、このプロパティを使って親要素「list」から子要素を取得し、配列のようにアクセスしています。

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

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

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

このコードを実行すると、コンソールには「Item 2」という文字列が表示されます。

これは、親要素「list」の2番目の子要素（インデックスは1）のテキスト内容が正しく取得できたことを表しています。

この方法を使用することで、リスト内の全ての項目に対して一括で処理を行ったり、特定のインデックスの子要素にアクセスしたりすることが可能になります。

○兄弟要素間のスタイル変更

兄弟要素を活用してスタイルを動的に変更することも可能です。

この技術は、ユーザーのインタラクションに応じてページの外観を変更する際に非常に有効です。

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

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

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';
});

このコードを実行すると、ボタンをクリックしたときに「Paragraph 2」の前の段落の色が赤に、後ろの段落の色が青に変わります。

これにより、ユーザーのアクションに応じて動的にページの外観を変更することができます。

この技術を応用することで、フォーム入力の検証結果の表示、インタラクティブなナビゲーションメニュー、動的なコンテンツのハイライトなど、様々な視覚的フィードバックを実現することができます。

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

兄弟要素の操作技術を習得したところで、より実践的な応用例を見ていきましょう。

ここでは、ウェブ開発でよく使用される機能の実装例を紹介します。

この例を通じて、兄弟要素の操作がどのように実際のウェブアプリケーションに活用されるのかを理解することができます。

各応用例では、HTMLとJavaScriptのコードを提示し、その動作原理と実装のポイントを解説します。

これらの例を参考に、自身のプロジェクトに合わせてカスタマイズし、より高度な機能を実現することができるでしょう。

○兄弟要素を使ったタブ切り替え

タブ切り替え機能は、限られたスペース内で複数の情報を効率的に表示するために広く使用されています。

兄弟要素を利用してこの機能を実装することで、コードをシンプルに保ちながら、効果的なユーザーインターフェースを作成することができます。

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

<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>

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';
  });
}

このコードを実行すると、タブをクリックすることで対応するコンテンツが表示され、他のコンテンツは非表示になります。

これで、限られたスペース内で複数の情報を効率的に表示することができます。

この実装方法は、製品詳細ページやダッシュボードなど、多くの情報を整理して表示する必要がある場面で特に有効です。

○兄弟要素を使ったアコーディオンメニュー

アコーディオンメニューは、多くの情報を階層的に整理し、ユーザーが必要な情報にすばやくアクセスできるようにする優れたUIパターンです。

兄弟要素を活用することで、シンプルかつ効果的なアコーディオンメニューを実装することができます。

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

<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>

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';
  });
}

このコードを実行すると、セクションのタイトルをクリックすることで、そのセクションの内容が表示・非表示を切り替えます。

これで、多くの情報を整理して表示し、ユーザーが必要な情報にすばやくアクセスできるようになります。

この実装方法は、FAQページ、製品カテゴリーリスト、設定画面など、多くの情報を階層的に表示する必要がある場面で特に効果的です。

○兄弟要素を使ったギャラリー

画像ギャラリーは、複数の画像を効果的に表示し、ユーザーが簡単に閲覧できるようにする重要な機能です。

兄弟要素を使ってシンプルなギャラリーを作成することで、コードの複雑さを抑えながら、効果的な画像表示を実現することができます。

この方法は特に、製品カタログ、ポートフォリオサイト、観光地の紹介ページなどで有用です。

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

この実装により、ユーザーは直感的な操作で画像を順番に閲覧することができます。

<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>

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」ボタンをクリックすることで、画像が順番に切り替わります。

これで、複数の画像を効果的に表示し、ユーザーが簡単に閲覧できるギャラリーを実現することができます。

この実装方法の利点は、DOM操作を最小限に抑えつつ、スムーズな画像切り替えを実現できる点です。

また、画像の数が増えても、コードの変更なしに対応できる柔軟性も備えています。

さらに、この基本的な実装に追加の機能を加えることで、より高度なギャラリーを作成することも可能です。

例えば、画像の説明文を表示する機能、サムネイル一覧を表示する機能、スワイプでの画像切り替え機能などを追加することで、ユーザー体験をさらに向上させることができるでしょう。

まとめ

本記事では、JavaScriptで兄弟要素を扱う方法とその応用例についてご紹介しました。

基本的な操作方法から、タブ切り替え、アコーディオンメニュー、ギャラリーなどの実践的な実装例まで、幅広く解説しました。

サンプルコードを参考にしながら、皆様のWebページに兄弟要素を活用した機能を追加してみてはいかがでしょうか。

実際に手を動かしてコードを書いてみることで、より深い理解と実践的なスキルを身につけることができるでしょう。