【JavaScript】nextElementSiblingで指定した要素のすぐ後にある兄弟要素を取得する

DOMトラバーシングに欠かせない便利なプロパティ、nextElementSiblingについて詳しく解説します。このプロパティを使えば、特定の要素の次にある兄弟要素を簡単に取得できます。

nextElementSiblingとは？

nextElementSiblingは、JavaScriptのDOM（Document Object Model）のプロパティの一つです。指定した要素のすぐ後にある兄弟要素（Element）を取得できます。このプロパティの強みは、テキストノードやコメントを無視し、Elementノードだけをターゲットにする点です。

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
const div1 = document.getElementById('div1');
const nextSiblingElement = div1.nextElementSibling;

console.log(nextSiblingElement); // <div id="div2">Div 2</div>

nextElementSiblingの使用例

このセクションでは、基本的な使い方を具体的なコード例と共に解説します。

例えば、HTMLに複数の

要素が並んでいる場面を想定しましょう。nextElementSiblingを使えば、指定した

要素の直後にある兄弟

要素を効率的に取得できます。

nextElementSiblingがnullを返すケース

指定した要素がその親要素の最後の子要素である場合、または次に兄弟Elementが存在しない場合、nextElementSiblingはnullを返します。

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
const div3 = document.getElementById('div3');
const nextSiblingElement = div3.nextElementSibling;

console.log(nextSiblingElement); // null

この例では、idが’div3’の要素がページ内で最後の要素であるため、nextElementSiblingはnullを返しています。

nextElementSiblingの活用シーン

nextElementSiblingは、特にDOMの特定の部分からスタートして、その次にあるElementを効率的に選択したい場合に活躍します。例えば、特定のセクションの次のセクションにスタイルを適用したり、フォームの一部を動的に表示/非表示にしたりする際に使うことができます。

注意点と補足

  • Internet Explorer 9以前のバージョンではnextElementSiblingプロパティは使えませんので、代わりの方法を検討する必要があります。
  • nextElementSiblingは、次にあるElementノードのみを返します。テキストノードやコメントノードは無視されるため、DOM構造を理解して使うことが重要です。

まとめ

nextElementSiblingは、特定のDOM要素の直後にある兄弟要素（Elementノード）を効率的に選択するための便利なプロパティです。このプロパティを使えば、コードがシンプルになり、DOMのトラバーシングが容易になります。ブラウザの互換性を確認しながら、この強力なプロパティをぜひ活用してみてください。