HTML DOM의 Select 객체는 HTML 문서 내 <select> 요소를 나타냅니다. 이 객체를 활용하면 자바스크립트로 드롭다운 목록을 동적으로 생성하고, 옵션을 추가·삭제하며, 선택 상태를 제어할 수 있습니다.
생성 문법
select 객체는 다음과 같이 createElement() 메서드를 사용해 생성합니다.
document.createElement("SELECT");주요 속성(Properties)
select 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.
| 속성 | 설명 |
|---|---|
| autofocus | 페이지 로드 시 드롭다운 목록에 자동으로 포커스가 설정되는지 여부를 확인하거나 설정합니다. |
| disabled | 드롭다운 목록이 비활성화되어 있는지 여부를 확인하거나 설정합니다. |
| length | HTML 문서에서 드롭다운 목록 안에 포함된 <option> 요소의 개수를 반환합니다. |
| form | 드롭다운 목록을 포함하는 폼(form)에 대한 참조를 반환합니다. |
| multiple | 드롭다운 목록에서 여러 옵션을 동시에 선택할 수 있는지 여부를 확인하거나 설정합니다. |
| name | 드롭다운 목록의 name 속성값을 확인하거나 변경합니다. |
| size | 드롭다운 목록의 size 속성값을 확인하거나 변경합니다. |
| type | 드롭다운 목록의 type 속성값을 반환합니다. |
| value | 드롭다운 목록의 value 속성값(선택된 옵션의 값)을 확인하거나 수정합니다. |
| selectedIndex | HTML 문서에서 드롭다운 목록의 현재 선택된 옵션 인덱스를 확인하거나 변경합니다. |
주요 메서드(Methods)
select 객체에서 제공하는 대표적인 메서드는 다음과 같습니다.
| 메서드 | 설명 |
|---|---|
| add() | HTML 문서의 드롭다운 목록에 새로운 옵션을 추가합니다. |
| remove() | HTML 문서의 드롭다운 목록에서 특정 옵션을 삭제합니다. |
| checkValidity() | HTML 문서에서 드롭다운 목록의 유효성을 검사합니다. |
예제 코드
아래 예제는 버튼 클릭 시 select 객체를 생성하여 화면에 드롭다운 목록을 추가하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#fff;
color:#0197F6;
}
h1{
color:#23CE6B;
}
.btn{
background-color:#fff;
border:1.5px dashed #0197F6;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#0197F6;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM select Object Demo</h1>
<button onclick="createDropDownList()" class="btn">Create a drop-down list</button>
<script>
function createDropDownList() {
var dropDown = document.createElement("SELECT");
dropDown.innerHTML="<option>CAKE</option><option>PIZZA<option><option>BURGER</option>";
document.body.appendChild(dropDown);
}
</script>
</body>
</html>위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
Create a drop-down list 버튼을 클릭하면 자바스크립트 함수가 실행되어 새로운 드롭다운 목록이 페이지에 추가됩니다.
정리
HTML DOM select 객체를 사용하면 <select> 요소를 동적으로 만들고 속성과 메서드를 통해 유연하게 제어할 수 있습니다. 특히 add(), remove() 메서드와 selectedIndex 속성을 조합하면 사용자 입력에 따라 실시간으로 변화하는 인터랙티브한 폼 UI를 손쉽게 구현할 수 있습니다.