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

HTML DOMのlengthプロパティとは？構文と使い方を実例付きで解説

HTML DOMのlengthプロパティは、ノードリスト（NodeList）オブジェクトに含まれるノードの総数を表す数値を返します。JavaScriptでDOM要素を動的に操作する際、対象となるノードの個数を把握するために頻繁に使われる、非常に基本的かつ重要なプロパティです。

lengthプロパティの構文

lengthプロパティの構文は以下のとおりです。

nodeListオブジェクト内のノード数を返します。

nodeList.length

lengthプロパティの使用例

それでは、HTML DOM lengthプロパティを使った具体的な例を見てみましょう。次のコードでは、ページ内にある<li>要素（学生名リスト）の数を取得し、ボタンをクリックすると合計人数が表示されます。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM length</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-length</legend>
<h3>Students</h3>
<ul>
<li>Adam</li>
<li>Alex</li>
<li>Bina</li>
<li>Eden</li>
<li>Rajesh</li>
<li>Zampa</li>
</ul>
<input type="button" onclick="getStrength()" value="Get Total Students">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var studentList = document.getElementsByTagName("li");
   function getStrength() {
      divDisplay.textContent = 'Total Students: '+studentList.length;
   }
</script>
</body>
</html>

この例では、document.getElementsByTagName("li")によって<li>要素のノードリストを取得し、「Get Total Students」ボタンがクリックされるとgetStrength()関数が呼び出されます。そして、studentList.lengthによりリスト内の要素数（＝学生の総数）が算出され、画面に表示される仕組みです。

実行結果

上記のコードを実行すると、以下のような画面が表示されます。

「Get Total Students」ボタンをクリックする前：

HTML DOMのlengthプロパティとは？構文と使い方を実例付きで解説

「Get Total Students」ボタンをクリックした後：

HTML DOMのlengthプロパティとは？構文と使い方を実例付きで解説

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

    HTML DOMのnextSiblingプロパティは、指定した要素ノードの直後に隣接するノードを返します。戻り値はNodeオブジェクトで、該当するノードが存在しない場合はnullが返されます。nextSiblingプロパティの注意点このプロパティは、テキストノードやコメントノードを無視しません。HTMLソース内で要素と要素の間に改行やスペースがあると、それらはテキストノードとして扱われるため、nextSiblingが要素ノードではなくテキストノードを返すことがあります。要素ノードだけを確実に取得したい場合は、要素ノードのみを対象とするnextElementSiblingプロパティを使用するのが

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

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