HTML DOM Option index 속성 완벽 정리

HTML DOM의 option index 속성은 HTML 문서에서 드롭다운 목록(select) 안에 있는 특정 옵션(option)의 인덱스 위치를 반환하거나 수정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 선택된 항목이 몇 번째 위치에 있는지 손쉽게 확인할 수 있습니다.

문법(Syntax)

1. 인덱스 값 반환하기

object.index

2. 인덱스 값 수정하기

object.index = "number"

예제(Example)

아래 예제는 HTML option index 속성을 실제로 활용한 코드입니다. 사용자가 좋아하는 과목을 드롭다운 목록에서 선택하고, 버튼을 클릭하면 해당 옵션의 인덱스가 화면에 표시됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.2rem;
    }
    .drop-down{
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:8px;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Option index Demo</h1>
<p>좋아하는 과목을 선택하세요:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="showIndex()" class="btn">Show Index</button>
<div class="show"></div>
<script>
    function showIndex() {
        var dropDown=document.querySelector(".drop-down");
        var showMsg=document.querySelector(".show");
        showMsg.innerHTML="Selected option index is: "+dropDown.options[dropDown.selectedIndex].index;
    }
</script>
</body>
</html>

실행 결과(Output)

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

HTML DOM Option index 속성 완벽 정리 – 문법과 실전 예제

이제 “Show Index” 버튼을 클릭해 보세요. 현재 선택된 옵션의 인덱스 값이 아래와 같이 화면에 나타납니다.

HTML DOM Option index 속성 완벽 정리 – 문법과 실전 예제

핵심 포인트 정리

index 속성은 select 요소 내 옵션의 순서(0부터 시작)를 나타냅니다.
dropDown.selectedIndex와 함께 사용하면 현재 선택된 옵션의 인덱스를 쉽게 구할 수 있습니다.
값을 직접 할당(object.index = "숫자")하여 인덱스를 변경할 수도 있습니다.