HTML DOM Datalist 객체 완벽 가이드 – 생성부터 활용까지

HTML DOM의 Datalist 객체는 HTML5에서 새롭게 도입된 <datalist> 요소와 연관된 객체입니다. 이 객체를 사용하면 입력 필드에 미리 정의된 선택 옵션 목록을 동적으로 제공할 수 있어, 사용자 경험을 크게 향상시킬 수 있습니다.

문법(Syntax)

Datalist 객체를 다루는 기본 문법은 다음과 같습니다.

Datalist 객체 생성하기

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

Datalist 객체에 접근하기

var p = document.getElementById("demoDatalist");

예제 코드

아래 예제는 버튼 클릭 시 옵션이 포함된 datalist 요소를 동적으로 생성하는 방법을 보여줍니다.

<!DOCTYPE html>
<html>
<head>
<title>DATALIST</title>
<style>
    button{
        margin-top:90px;
    }
</style>
</head>
<body>
<h2>Datalist 객체 예제</h2>
<p>아래 버튼을 클릭하면 옵션이 포함된 datalist 요소가 생성됩니다.</p>
<form id="FORM1">
</form>
<button onclick="createData()">CREATE</button>
<script>
    function createData() {
        var i = document.createElement("INPUT");
        i.setAttribute("list", "fruits");
        document.getElementById("FORM1").appendChild(i);
        var y = document.createElement("DATALIST");
        y.setAttribute("id", "fruits");
        document.getElementById("FORM1").appendChild(y);
        var fruit1 = document.createElement("OPTION");
        fruit1.setAttribute("value", "mango");
        document.getElementById("fruits").appendChild(fruit1);
        var fruit2 = document.createElement("OPTION");
        fruit2.setAttribute("value", "papaya");
        document.getElementById("fruits").appendChild(fruit2);
    }
</script>
</body>
</html>

실행 결과

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

HTML DOM Datalist 객체 완벽 가이드 – 생성부터 활용까지

CREATE 버튼을 클릭한 후 −

HTML DOM Datalist 객체 완벽 가이드 – 생성부터 활용까지

코드 상세 설명

위 예제의 동작 원리를 단계별로 살펴보겠습니다.

1. 빈 폼 생성

먼저 id가 "FORM1"인 빈 폼을 만들어 둡니다. 이후 자바스크립트를 통해 이 폼 안에 datalist를 추가하게 됩니다.

<form id="FORM1"></form>

2. 버튼과 이벤트 연결

CREATE 버튼은 사용자가 클릭하면 createData() 함수를 실행하도록 onclick 이벤트와 연결되어 있습니다.

<button onclick="createData()">CREATE</button>

3. 입력 요소 생성 및 list 속성 설정

createData() 함수는 먼저 document 객체의 createElement() 메서드를 사용해 input 요소를 생성하고 변수 i에 할당합니다. 그다음 setAttribute() 메서드로 list 속성을 만들고 값을 "fruits"로 지정합니다. 이 list 속성이 핵심인데, 바로 이 속성이 입력 박스와 datalist를 서로 연결해 주기 때문입니다. 마지막으로 appendChild() 메서드에 "FORM1"을 매개변수로 전달하여 입력 박스를 폼에 추가합니다.

4. Datalist 및 옵션 요소 추가

이어서 <datalist> 요소를 생성하고, 입력 박스에 지정했던 것과 동일한 값인 "fruits"를 id로 설정합니다. 그런 다음 createElement() 메서드로 두 개의 <option> 요소(mango, papaya)를 만들고, appendChild() 메서드에 datalist의 id를 전달하여 옵션들을 datalist 내부에 추가합니다.

function createData() {
    var i = document.createElement("INPUT");
    i.setAttribute("list", "fruits");
    document.getElementById("FORM1").appendChild(i);
    var y = document.createElement("DATALIST");
    y.setAttribute("id", "fruits");
    document.getElementById("FORM1").appendChild(y);
    var fruit1 = document.createElement("OPTION");
    fruit1.setAttribute("value", "mango");
    document.getElementById("fruits").appendChild(fruit1);
    var fruit2 = document.createElement("OPTION");
    fruit2.setAttribute("value", "papaya");
    document.getElementById("fruits").appendChild(fruit2);
}

정리

Datalist 객체를 활용하면 텍스트 입력 필드에 자동완성 형태의 제안 목록을 손쉽게 연결할 수 있습니다. 핵심은 input 요소의 list 속성 값과 datalist 요소의 id 값을 일치시키는 것이며, createElement()와 appendChild() 메서드를 조합하면 페이지 로드 후에도 동적으로 목록을 구성할 수 있습니다.