2024/12/23 (更新日:2025/01/02)

【JavaScript】「element.nextElementSibling」の使い方！【分かりやすい】

Categories > JavaScriptの入門編

こんばんは！初めましての方は初めまして！
しゅーた（@chibasyuta）です！

この記事では「JavaScript」の「element.nextElementSibling」の使い方を解説します。

「element.nextElementSibling」の基本的な使い方から実際のコード例まで、解説していきますので、興味がある方は読んでいってください！

この記事の内容！

「element.nextElementSibling」とは何か？
「element.nextElementSibling」の使い方！
ユースケース

また、下の動画でも「element.nextElementSibling」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ！

それでは内容へ入ります。

「element.nextElementSibling」とは何か？

「element.nextElementSibling」を使うことで、指定した要素の「次にある兄弟要素」を取得することができます。

ふむふむ。

「element.nextElementSibling」

「次にある兄弟要素」の取得
nullを返すことがある（次に要素が存在しない場合）
「テキスト」や「コメント」はスキップ

「element.nextElementSibling」の使い方！

<div id="container">
  <p id="first">これは一番目のパラグラフです</p>
  <p id="second">これは二番目のパラグラフです</p>
  <p id="third">これは三番目のパラグラフです</p>
</div>

const firstParagraph = document.getElementById('first');
const secondParagraph = firstParagraph.nextElementSibling;

console.log(secondParagraph.id); // 出力: "second"

このコードでは、first IDの要素を取得し、その次にある要素の ID をログに出力しています。

まず「first」を「id」に持つ要素を取得する。

そして「element.nextElementSibling」を使用して次の要素を取得する。

そしてそれをコンソールに出力しています。

ユースケース

ここからは実際のユースケースを解説します。

次の要素に強調表示を追加

const firstParagraph = document.getElementById('first');
const secondParagraph = firstParagraph.nextElementSibling;

if (secondParagraph) {
  secondParagraph.style.fontWeight = 'bold';
}

初めの要素の「次の兄弟要素」にスタイルを追加しています。

要素をループで読み取る

let currentElement = document.getElementById('first');

while (currentElement) {
  console.log(currentElement.textContent);
  currentElement = currentElement.nextElementSibling;
}

このコードは、要素を連続的に読み込むのに有用です。