previousSibling

プリビウスシブリング（DOM操作）

意味前の要素の取得

previousSiblingとは？

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

previousSiblingの具体的な使い方

前の兄弟要素を取得する例

<div id="container">
  <p>最初の段落</p>
  <p id="current">現在の段落</p>
  <p>最後の段落</p>
</div>

<button onclick="showPreviousSibling()">前の兄弟要素を表示</button>

<script>
function showPreviousSibling() {
  const currentElement = document.getElementById('current');
  const previousSibling = currentElement.previousSibling;

  if (previousSibling.nodeType === Node.TEXT_NODE) {
    alert('前の兄弟要素はテキストノードです。');
  } else if (previousSibling.nodeType === Node.ELEMENT_NODE) {
    alert('前の兄弟要素: ' + previousSibling.tagName + '\n内容: ' + previousSibling.textContent);
  } else {
    alert('前の兄弟要素が見つかりません。');
  }
}
</script>

この例では、'current'というIDを持つ段落要素の前の兄弟要素を取得します。previousSiblingはテキストノード（空白や改行）も返すため、ノードの種類を確認してから適切な情報を表示します。要素ノードの場合はタグ名と内容を、テキストノードの場合はその旨を表示します。

previousSiblingに関するよくある質問

Q. previousSiblingとは何ですか？

A. previousSiblingは、現在の要素の直前にある兄弟要素（同じ親を持つ要素）を返すJavaScriptのプロパティです。

Q. テキストノードも返しますか？

A. はい、previousSiblingはテキストノードも返します。要素ノードのみを取得したい場合は、previousElementSiblingを使用してください。

Q. 最初の要素での使用は？

A. 最初の要素でpreviousSiblingを使用すると、nullが返されます。これは前の兄弟要素が存在しないためです。

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのpreviousSiblingについても学べる書籍の紹介

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

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