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

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

HTMLDOMDatalistオブジェクトはHTML5の要素に関連付けられています。

構文

以下は構文です-

データリストオブジェクトを作成するには-

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

データリストオブジェクトにアクセスするには-

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

例

HTMLDOMデータリストオブジェクトの例を見てみましょう-

<!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>

出力

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

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

[作成]ボタンをクリックした後-

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

上記の例では-

最初に、IDが「FORM1」の空のフォームを作成しました。このフォームでは、後でデータリストオブジェクトを使用してデータリストを追加します。

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

ユーザーがクリックするとcreateData（）関数を実行するCREATEボタンを作成しました。

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

createData（）メソッドは、最初にドキュメントオブジェクトのcreateElement（）メソッドを使用して入力要素を作成し、それを変数iに割り当てます。 setAttribute（）メソッドを使用して、list属性を作成し、それに値fruitsを割り当てます。このリスト属性は、入力ボックスをデータリストにリンクするため重要です。次に、appendChild（）メソッドを使用して入力ボックスをフォームに追加し、パラメーター値として「FORM1」を指定します。

次に、要素を作成し、そのidを入力ボックスに指定したのと同じ値（「fruits」）に設定します。次に、createElement（）メソッドを使用してデータリスト内に2つの

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. HTMLDOMタイトルオブジェクト

    HTMLのHTMLDOMTitle Objectは、要素を表します。 を作成する 要素 var titleObject = document.createElement(“TITLE”) ここでは、「titleObject」 次のプロパティを持つことができます- プロパティ 説明 テキスト ドキュメントの要素の値を設定/返します タイトルテキストの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title id="titleSe

  2. HTMLDOMUlオブジェクト

    HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE