[js] JS - list 속성 - INPUT 텍스트 필드에 입력 가능한 datalis(데이터리스트)t에 대한 참조 반환 (= list속성 = 리스트속성) 인풋 리스트 속성

1. list 예제 - 입력 가능 데이터 리스트 객체 반환
2. list 정의
3. list 구문

list 예제 - 입력 가능 데이터 리스트 객체 반환

 

<form action="/action_page.php" method="get">

  <label for="hz">자신있는 코딩언어는?</label>

  <input list="lang" name="hz" id="hz">

  <datalist id="lang">

    <option value="HTML">

    <option value="CSS">

    <option value="JS">

    <option value="PHP">

    <option value="SQL">

  </datalist>

  <input type="submit">

</form>

<div id="demo1"></div>

<div id="demo2"></div>

<div id="demo3"></div>

<div id="demo4"></div>

<script>

let x = document.getElementById("hz").list;

demo1.innerHTML = x; // [object HTMLDataListElement]

demo2.innerHTML = x.id; // lang

demo3.innerHTML = x.options; // [object HTMLCollection]

demo4.innerHTML = x.options.length; // 5

</script>

 

결과보기

list 정의

 

INPUT 텍스트 필드에 입력 가능한 datalist에 대한 참조 반환.

 

---

 

1. 

• list 속성은 읽기전용. (즉, 설정은 불가)
• HTML: <datalist> 태그
• JS: <datalist> 객체

 

2

IE10 이상 주요 최신 브라우저 지원.

단, Safari 브라우저는 지원 X.

 

list 구문

 

datalist 객체 반환

textObject.list

 

---

PS.

 

datalist 객체의 id 반환

textObject.list.id

 

datalist 객체의 option 객체 반환

textObject.list.option

 

datalist 객체의 option 객체의 개수 반환

textObject.list.option.length