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

HTML DOM Datalistのoptionsコレクションとは？プロパティ・メソッドと使い方を解説

HTML DOMのDatalist optionsコレクションは、HTMLの<datalist>要素内に含まれる<option>要素のコレクションを取得・操作するために使用されます。コレクション内の要素は、ドキュメント上に出現する順序と同じ順序で並びます。

Datalist optionsコレクションのプロパティ

Datalist optionsコレクションには、以下のプロパティが用意されています。

プロパティ説明
lengthコレクション内に存在する<option>要素の数を返します。読み取り専用のプロパティです。

Datalist optionsコレクションのメソッド

Datalist optionsコレクションには、以下のメソッドが用意されています。

メソッド説明
[index]指定したインデックス位置にある<option>要素をコレクションから返します。インデックスは0から始まり、範囲外の番号を指定した場合はnullが返されます。
item(index)指定したインデックスに対応する<option>要素をコレクションから返します。インデックスは0から始まり、範囲外の場合はnullが返されます。
namedItem(id)指定したidを持つ<option>要素をコレクションから返します。該当するidが存在しない場合はnullが返されます。

構文

Datalist optionsコレクションの構文は以下の通りです。

datalistObject.options

サンプルコード

Datalist optionsコレクションの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Datalist option elements example</h2>
<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>
<p>Click the below button to display the number of datalist option elements</p>
<button onclick="elementNo()">COUNT</button>
<p id="Sample"></p>
<script>
    function elementNo() {
      var fLength = document.getElementById("fruits").options.length;
      document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
    }
</script>
</body>
</html>

実行結果

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

HTML DOM Datalistのoptionsコレクションとは？プロパティ・メソッドと使い方を解説

COUNTボタンをクリックすると（datalist自体をクリックして、候補として表示される要素を自分で確認することもできます）、次のようになります。

HTML DOM Datalistのoptionsコレクションとは？プロパティ・メソッドと使い方を解説

コードの解説

まず、list属性の値を「fruits」とした入力ボックス（<input>）を作成し、同じidを持つdatalistと関連付けています。これにより、入力ボックスに文字を入力すると、datalistが入力内容に合う候補値を自動的に補完して表示します。ここでは、id「fruits」のdatalistを作成し、その中に4つの<option>要素を配置しています。datalistとそれに関連付けられた入力ボックスは、どちらもフォーム内に設置されています。

<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>

次に、ユーザーがクリックするとelementNo()関数を実行する「COUNT」ボタンを作成しています。

<button onclick="elementNo()">COUNT</button>

elementNo()関数では、getElementById()メソッドを使ってdatalistのoptions.lengthプロパティの値を取得し、変数fLengthに代入しています。その後、innerHTMLプロパティを使用して、id「Sample」の段落にオプションの数を表示します。

function elementNo() {
    var fLength = document.getElementById("fruits").options.length;
    document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
}

  1. HTML DOM テーブルの tBodies コレクションとは？基本構文と使い方を徹底解説

    HTML DOM の table tBodies コレクションは、HTML ドキュメント内のテーブルに含まれるすべての <tbody> 要素をコレクションとして取得するための機能です。テーブル内の tbody 要素の数を調べたり、特定の tbody にアクセスしたりする際に活用できます。 tBodies コレクションの基本構文 tBodies コレクションを使用する際の構文は以下の通りです。 object.tBodies tBodies コレクションのプロパティ プロパティ説明 lengthコレクション内に含まれる <tbody> 要素の数を返します。 tB

  2. HTML DOM テーブルの rows コレクションとは？使い方をサンプルコード付きで解説

    HTML DOM のテーブル rows コレクションは、HTML ドキュメント内のテーブルに含まれるすべての <tr> 要素のコレクションを返します。このコレクションを利用すると、JavaScript からテーブルの行数を取得したり、特定の行にアクセスしたりすることが簡単に行えます。構文rows コレクションの構文は以下のとおりです。object.rowsrows コレクションのプロパティrows コレクションには、以下のプロパティが用意されています。プロパティ説明lengthHTML ドキュメント内のコレクションに含まれる <tr> 要素の数を返します。rows コレ