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

HTML DOMのDatalistオブジェクトとは？作成・アクセス方法を実例付きで解説

HTML DOMのDatalistオブジェクトは、HTML5で導入された<datalist>要素に関連付けられたオブジェクトです。テキスト入力欄に入力候補のリストを提供したい場合に活用でき、JavaScriptから動的に生成・操作することも可能です。

構文

Datalistオブジェクトの基本的な構文は以下の通りです。

Datalistオブジェクトを作成する

var p = document.createElement("DATALIST");

Datalistオブジェクトにアクセスする

var p = document.getElementById("demoDatalist");

サンプルコード

ここでは、HTML DOMのDatalistオブジェクトを使った具体的な例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<title>DATALIST</title>
<style>
    button{
        margin-top:90px;
    }
</style>
</head>
<body>
<h2>Datalist object example</h2>
<p>Click the below button to create a datalist element with options</p>
<form id="FORM1">
</form>
<button onclick="createData()">CREATE</button>
<script>
    function createData() {
        var i = document.createElement("INPUT");
        i.setAttribute("list", "fruits");
        document.getElementById("FORM1").appendChild(i);
        var y = document.createElement("DATALIST");
        y.setAttribute("id", "fruits");
        document.getElementById("FORM1").appendChild(y);
        var fruit1 = document.createElement("OPTION");
        fruit1.setAttribute("value", "mango");
        document.getElementById("fruits").appendChild(fruit1);
        var fruit2 = document.createElement("OPTION");
        fruit2.setAttribute("value", "papaya");
        document.getElementById("fruits").appendChild(fruit2);
    }
</script>
</body>
</html>

出力結果

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

HTML DOMのDatalistオブジェクトとは？作成・アクセス方法を実例付きで解説

「CREATE」ボタンをクリックすると、以下のようにdatalist要素が動的に生成されます。

HTML DOMのDatalistオブジェクトとは？作成・アクセス方法を実例付きで解説

コードの解説

上記の例では、以下のような処理を行っています。

まず、id「FORM1」を持つ空のフォームを作成しています。このフォームの中に、後ほどDatalistオブジェクトを使ってdatalist要素を追加していきます。

<form id="FORM1"></form>

次に、「CREATE」というボタンを配置し、ユーザーがクリックするとcreateData()関数が実行されるように設定しています。

<button onclick="createData()">CREATE</button>

createData()関数では、まずdocumentオブジェクトのcreateElement()メソッドを使ってinput要素を生成し、変数iに代入します。続いてsetAttribute()メソッドでlist属性を作成し、「fruits」という値を設定します。このlist属性は、入力ボックスとdatalistを紐付けるために非常に重要な役割を果たします。その後、appendChild()メソッドに「FORM1」を引数として渡すことで、入力ボックスをフォームに追加しています。

さらに、<datalist>要素を生成し、入力ボックスに指定したのと同じ値である「fruits」をidとして設定します。そして、createElement()メソッドを使ってdatalist内に2つの<option>要素を生成し、appendChild()メソッドにdatalistのidを渡して、それぞれの選択肢をdatalistに追加しています。

function createData() {
    var i = document.createElement("INPUT");
    i.setAttribute("list", "fruits");
    document.getElementById("FORM1").appendChild(i);
    var y = document.createElement("DATALIST");
    y.setAttribute("id", "fruits");
    document.getElementById("FORM1").appendChild(y);
    var fruit1 = document.createElement("OPTION");
    fruit1.setAttribute("value", "mango");
    document.getElementById("fruits").appendChild(fruit1);
    var fruit2 = document.createElement("OPTION");
    fruit2.setAttribute("value", "papaya");
    document.getElementById("fruits").appendChild(fruit2);
}
  1. HTML DOM Titleオブジェクトとは？textプロパティの使い方をわかりやすく解説

    HTML DOM Titleオブジェクトの概要HTML DOM の Title オブジェクトは、HTML ドキュメント内の <title> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScript からページのタイトルを動的に取得したり変更したりすることが可能になります。<title> 要素の作成方法新しい <title> 要素を作成するには、document.createElement() メソッドを使用します。var titleObject = document.createElement(TITLE)ここで作成した「title

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注