HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのnextSiblingプロパティとは？使い方とサンプルコードを解説

HTML DOMのnextSiblingプロパティは、指定した要素ノードの直後に隣接するノードを返します。戻り値はNodeオブジェクトで、該当するノードが存在しない場合はnullが返されます。

nextSiblingプロパティの注意点

このプロパティは、テキストノードやコメントノードを無視しません。HTMLソース内で要素と要素の間に改行やスペースがあると、それらはテキストノードとして扱われるため、nextSiblingが要素ノードではなくテキストノードを返すことがあります。

要素ノードだけを確実に取得したい場合は、要素ノードのみを対象とするnextElementSiblingプロパティを使用するのがおすすめです。

構文

nextSiblingノードを取得する構文は以下のとおりです。

nodeList.nextSibling

サンプルコード

それでは、HTML DOM nextSiblingプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM nextSibling</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   ul{
      width: 30%;
      margin: 0 auto;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-nextSibling</legend>
         <h3>Grocery Store</h3>
            <ul>
               <li>Monday</li>
                  <li>Tuesday</li>
                  <li>Wednesday</li>
                  <li>Thursday</li>
                  <li>Friday</li>
                  <li id="Today">Saturday</li><li>Sunday</li>
                  //<li>要素の間に空白を入れないこと。nextSiblingは空白（テキストノード）を無視しないためです
               </ul>
         <input type="button" onclick="getTimmings()" value="Get Sale Day">
         <div id="divDisplay"></div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var dayToday = document.getElementById("Today");
   function getTimmings() {
      divDisplay.textContent = 'Sale on last day of week: '+dayToday.nextSibling.textContent;
   }
</script>
</body>
</html>

このコードでは、idが「Today」である<li>要素（Saturday）を取得し、そのnextSiblingプロパティで直後のノード（Sundayの<li>要素）を参照しています。ボタンをクリックすると、週の最終日の曜日が画面に表示されます。なお、<li>要素の間に空白を挟むとテキストノードが返されてしまうため、要素同士は改行なしで連続して記述している点にも注目してください。

実行結果

「Get Sale Day」ボタンをクリックする前の表示：

HTML DOMのnextSiblingプロパティとは？使い方とサンプルコードを解説

「Get Sale Day」ボタンをクリックした後の表示：

HTML DOMのnextSiblingプロパティとは？使い方とサンプルコードを解説

ボタンをクリックすると「Sale on last day of week: Sunday」と表示され、nextSiblingプロパティによってSaturdayの直後の要素であるSundayが正しく取得できたことが確認できます。

  1. HTML DOMのnextElementSiblingプロパティとは？使い方とサンプルコードを解説

    nextElementSiblingプロパティとは HTML DOMのnextElementSiblingプロパティは、指定した要素ノードの直後に隣接している要素ノード（次の兄弟要素）を返します。 注意：このプロパティは、テキストノードやコメントノードを無視し、要素ノードのみを対象とします。HTMLソース内の空白や改行によるテキストノードの影響を受けずに、確実に次の要素を取得できるのが特徴です。なお、次の兄弟要素が存在しない場合は null が返されます。 構文 nextElementSiblingノードを取得するための構文は以下の通りです。 nodeList.nextElementSibl

  2. HTML DOM textContentプロパティの使い方を徹底解説

    HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ