HTMLDOMデータリストオプションコレクション

HTML DOMデータリストオプションコレクションは、HTML要素内に存在するオプション値コレクションを設定または返すために使用されます。要素は、ドキュメント内と同じ順序で表示されます。

プロパティ

以下は、データリストオプションコレクションのプロパティです-

プロパティ	説明
長さ	コレクション内の

メソッド

データリストオプションコレクションのメソッドは次のとおりです-

メソッド	説明
[index]	指定されたインデックスに存在するコレクションから
item（index）	指定されたインデックスを持つコレクションから
namedItem（id）	指定されたIDを持つコレクションから

構文

以下は、データリストオプションコレクション-

の構文です。

datalistObject.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>

出力

これにより、次の出力が生成されます-

HTMLDOMデータリストオプションコレクション

COUNTボタンをクリックすると（データリストをクリックして要素を自分でカウントできます）-

HTMLDOMデータリストオプションコレクション

同じIDのデータリストにリンクするために、属性リスト値「fruits」の入力ボックスを作成しました。これは、入力ボックスに入力すると、データリストがオプション値を使用して入力テキストを完成させようとすることを意味します。 IDが「fruits」のデータリストが作成され、その中に4つのオプション値があります。データリストとそれにリンクされた入力ボックスは両方ともフォーム内にあります-

<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（）メソッドを使用してデータリストのoptions.lengthプロパティ値を取得し、それを変数fLengthに割り当てます。オプションカウント値は、innerHTMLプロパティ-

を使用して、IDが「Sample」の段落に表示されます。

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

が含まれています

HTMLDOMDDオブジェクト

HTMLDOMデータリストオブジェクト

HTMLDOMテーブルtBodiesコレクション
HTML DOMテーブルのtBodiesコレクションは、HTMLドキュメントのテーブル内のすべての要素のコレクションを返します。構文以下は構文です- object.tBodies tBodiesコレクションのプロパティプロパティ説明長さ HTMLドキュメントのコレクション内の要素の数を返します tBodiesコレクションのプロパティメソッド説明 [index] コレクションから指定されたインデックス要素を返します。 item（index）コレクションから指定されたインデックス要素を返します。 namedItem（id）コレクションから指
HTMLDOMテーブル行コレクション
HTML DOMテーブル行コレクションは、HTMLドキュメント内のテーブルのすべての要素のコレクションを返します。構文以下は構文です- object.rows 行コレクションのプロパティ HTMLドキュメントのコレクション内の要素。プロパティ説明長さ HTMLドキュメントのコレクション内の要素の数を返します。行収集の方法コレクションの要素コレクションの要素。コレクションの要素メソッド説明 [インデックス] コレクションから指定されたインデックス要素を返します。 item（index）コレクションから