nextSibling

ネクストシブリング（DOM操作）

意味次の要素の取得

nextSiblingとは？

nextSiblingプロパティは、現在の要素の直後の兄弟要素を返します。

nextSiblingの具体的な使い方

要素の次の兄弟ノードを取得し表示する例

<div id="container">
  <p id="first">最初の段落</p>
  <p id="second">2番目の段落</p>
  <p id="third">3番目の段落</p>
</div>
<button onclick="showNextSibling()">次の兄弟ノードを表示</button>

<script>
function showNextSibling() {
  const firstParagraph = document.getElementById('first');
  let nextNode = firstParagraph.nextSibling;
  let nextElement = firstParagraph.nextElementSibling;
  
  alert(`nextSibling: ${nextNode.nodeName}\nnextElementSibling: ${nextElement.tagName}`);
  
  if (nextElement) {
    nextElement.style.backgroundColor = 'yellow';
  }
}
</script>

最初の段落要素の次の兄弟ノード（nextSibling）と次の要素ノード（nextElementSibling）を取得し、その情報をアラートで表示します。また、次の要素ノードの背景色を黄色に変更して視覚的に確認できるようにします。

要素の次の要素ノードを取得しコンソールに表示する例

const element = document.getElementById('first');
const nextElement = element.nextElementSibling;
console.log(nextElement ? `次の要素ノード: ${nextElement.tagName}` : '次の要素ノードはありません');

👇出力結果

次の要素ノード: P

nextElementSiblingを使用して、指定した要素の次の要素ノードを取得し、そのタグ名をコンソールに出力します。次の要素ノードが存在しない場合はその旨を表示します。

nextSiblingに関するよくある質問

Q. nextSiblingとnextElementSibling

A. nextSiblingは次のノード（要素ノードやテキストノードを含む）を返しますが、nextElementSiblingは次の要素ノードのみを返します。テキストノードを無視したい場合はnextElementSiblingを使用すると便利です。

Q. 次の要素がない場合は？

A. 次の兄弟ノードが存在しない場合、nextSiblingとnextElementSiblingの両方がnullを返します。

Q. 空白文字は取得されますか？

A. nextSiblingを使用する場合、HTMLの整形のための空白や改行もテキストノードとして取得される可能性があります。これを避けたい場合はnextElementSiblingを使用するか、ノードタイプをチェックする必要があります。

nextSiblingが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのnextSiblingやNode、children、querySelector()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。