HTML DOM Datalist对象(Datalist Object)

Datalist对象代表了HTML文档中的datalist元素,datalist元素是HTML5中的新增加元素。

注:IE9及更早版本及Safari浏览器不支持datalist元素。

如何访问Datalist对象?

使用getElementById()访问datalist元素。

var  x = document.getElementById("myDatalist");

如何创建Datalist对象

使用createElement()方法创建datalist元素。

var x = document.createElement("datalist");

标准属性及事件

Datalist对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问DATALIST元素?</h3>

<form>

<input list="myDatalist">

<datalist id="myDatalist">

<option value="Internet Explorer">

<option value="Firefox">

<option value="Chrome">

<option value="Opera">

<option value="Safari">

</datalist>

</form>

<p>点击以下按钮,获取datalist元素中option元素的数量</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myDatalist").options.length;

document.getElementById("demo").innerHTML = "找到 " + x + " 个选项";

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建DATALIST元素?</h3>

<form id="myForm">

</form>

<p>点击以下按钮,创建一个datalist元素</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

var x = document.createElement("INPUT");

x.setAttribute("list", "browsers");

document.getElementById("myForm").appendChild(x);

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

y.setAttribute("id", "browsers");

document.getElementById("myForm").appendChild(y);

var z = document.createElement("OPTION");

z.setAttribute("value", "Chrome");

document.getElementById("browsers").appendChild(z);

}

</script>

</body>

</html>

关联内容