HTML DOM에서 Select 객체의 type 속성은 HTML 문서 내 드롭다운 목록(select 요소)의 type 속성 값을 반환합니다. 일반적인 단일 선택 드롭다운 목록은 select-one을 반환하며, multiple 속성이 설정된 다중 선택 목록은 select-multiple을 반환합니다.
구문
type 속성의 기본 구문은 다음과 같습니다.
object.type
예제
HTML DOM Select type 속성의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.1rem;
}
.drop-down{
display:block;
width:35%;
border:2px solid #fff;
background-color:transparent;
color:#fff;
font-weight:bold;
padding:8px;
margin:1rem auto;
}
.btn{
background:orange;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
font-weight:bold;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Select type 속성 데모</h1>
<p>안녕하세요! 좋아하는 과목을 선택해 주세요:</p>
<select class='drop-down' name="Drop Down List">
<option>물리학</option>
<option>수학</option>
<option>화학</option>
<option>영어</option>
</select>
<button type="button" onclick="getType()" class="btn">타입 보기</button>
<div class="show"></div>
<script>
function getType() {
var dropDown = document.querySelector(".drop-down");
document.querySelector(".show").innerHTML="type = " + dropDown.type;
}
</script>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 화면이 표시됩니다.
여기서 “타입 보기” 버튼을 클릭하면 자바스크립트의 querySelector() 메서드로 드롭다운 목록을 선택한 뒤, 해당 요소의 type 속성 값이 화면 하단에 출력됩니다.
핵심 포인트
이 예제에서 버튼 클릭 시 getType() 함수가 호출되어 드롭다운 목록의 type 값을 가져옵니다. 단일 선택 목록이므로 결과는 select-one으로 표시되며, 만약 select 요소에 multiple 속성을 추가하면 select-multiple이 반환됩니다.