목차
- <datalist> 객체 정의 - 입력 가능값 리스트
- <datalist> 객체 구문
- <datalist> 객체 예제 - 접근
- <datalist> 객체 예제 - 생성
- <datalist> 객체 집합
<datalist> 객체 정의 - 입력 가능값 리스트
HTML <datalist> 태그(요소) 의미. (IE9 이하 및 Safari 지원 X)
※ <input> 태그의 list 속성과 <datalist>의 id 속성을 통해 서로 연동.
<datalist> 객체 구문
[접근]
var x = document.getElementById("요소ID");
[생성]
var x = document.createElement("DATALIST");
<datalist> 객체 예제 - 접근
<form>
<input list="hz">
<datalist id="hz">
<option value="HTML">
<option value="CSS">
<option value="JS">
<option value="PHP">
<option value="SQL">
</datalist>
</form>
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
var x = document.getElementById("hz").options.length;
document.getElementById("demo").innerHTML = x + " 개 옵션 존재.";
}
</script>
결과보기
<datalist> 객체 예제 - 생성
<form id="hzForm">
</form>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var x = document.createElement("INPUT");
x.setAttribute("list", "hz");
document.getElementById("hzForm").appendChild(x);
var y = document.createElement("DATALIST");
y.setAttribute("id", "hz");
document.getElementById("hzForm").appendChild(y);
var z = document.createElement("OPTION");
z.setAttribute("value", "HTML");
document.getElementById("hz").appendChild(z);
}
</script>
결과보기
<datalist> 객체 집합
options
<datalist> 객체 안 모든 <option> 요소의 컬렉션 반환.
※ <datalist> 객체는 표준 속성/메서드/이벤트 지원.
