HTML DOM Datalist options 컬렉션 – 속성, 메서드와 활용 예제

HTML DOM의 Datalist options 컬렉션은 HTML <datalist> 요소 내부에 포함된 옵션 값 컬렉션을 설정하거나 반환하는 데 사용됩니다. 컬렉션에 담긴 요소들은 문서에 작성된 순서 그대로 정렬됩니다.

속성(Properties)

Datalist options 컬렉션에서 제공하는 속성은 다음과 같습니다.

속성	설명
length	컬렉션 내 <option> 요소의 개수를 반환합니다. 읽기 전용(read-only) 속성입니다.

메서드(Methods)

Datalist options 컬렉션에서 제공하는 메서드는 다음과 같습니다.

메서드	설명
[index]	지정한 인덱스 위치의 <option> 요소를 반환합니다. 인덱스는 0부터 시작하며, 범위를 벗어난 경우 null이 반환됩니다.
item(index)	주어진 인덱스에 해당하는 <option> 요소를 반환합니다. 인덱스는 0부터 시작하며, 범위를 벗어나면 null이 반환됩니다.
namedItem(id)	주어진 id와 일치하는 <option> 요소를 반환합니다. 해당 id가 존재하지 않으면 null이 반환됩니다.

문법(Syntax)

Datalist options 컬렉션의 기본 문법은 다음과 같습니다.

datalistObject.options

예제(Example)

Datalist options 컬렉션의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>Datalist option elements example</h2>
<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>
<p>Click the below button to display the number of datalist option elements</p>
<button onclick="elementNo()">COUNT</button>
<p id="Sample"></p>
<script>
   function elementNo() {
      var fLength = document.getElementById("fruits").options.length;
      document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
   }
</script>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Datalist options 컬렉션 – 속성, 메서드와 활용 예제

COUNT 버튼을 클릭하면(직접 datalist를 클릭해 요소 수를 확인해 볼 수도 있습니다) 아래와 같은 결과가 표시됩니다.

HTML DOM Datalist options 컬렉션 – 속성, 메서드와 활용 예제

코드 설명

먼저 입력 상자(input)의 list 속성 값을 "fruits"로 지정하여, 동일한 id를 가진 datalist와 연결했습니다. 이렇게 연결하면 입력 상자에 텍스트를 입력할 때 datalist가 옵션 값을 기반으로 입력 내용을 자동 완성해 줍니다. id가 "fruits"인 datalist가 생성되었으며, 그 안에는 네 개의 옵션 값(파파야, 딸기, 구아바, 망고)이 포함되어 있습니다. datalist와 연결된 입력 상자는 모두 form 요소 내부에 위치합니다.

<form>
<input list="fruits">
<datalist id="fruits">
<option value="Papaya">
<option value="Strawberry">
<option value="Guava">
<option value="Mango">
</datalist>
</form>

그다음, 사용자가 클릭하면 elementNo() 함수를 실행하는 COUNT 버튼을 만들었습니다.

<button onclick="elementNo()">COUNT</button>

elementNo() 함수는 getElementById() 메서드로 datalist의 options.length 속성 값을 가져와 변수 fLength에 저장합니다. 이후 innerHTML 속성을 이용해 id가 "Sample"인 단락에 옵션 개수를 출력합니다.

function elementNo() {
   var fLength = document.getElementById("fruits").options.length;
   document.getElementById("Sample").innerHTML = "The datalist contains " + fLength + " options";
}