JavaScript

[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. 

 

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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
1/89
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 5
웹유틸
회원센터
홈짱 PC버전 로그인