HTML DOM Ol 객체 완벽 가이드 – 속성과 활용 예제

HTML DOM의 Ol 객체는 HTML 문서에서 <ol>(순서 있는 목록) 요소를 나타냅니다. 자바스크립트를 통해 이 객체에 접근하면 목록의 시작 번호, 번호 매기기 방식, 정렬 방향 등을 동적으로 제어할 수 있습니다.

Ol 요소 생성하기

자바스크립트로 새로운 <ol> 요소를 생성하려면 다음과 같이 작성합니다.

var olObject = document.createElement("OL")

Ol 객체의 주요 속성

생성된 olObject는 다음과 같은 속성들을 가질 수 있습니다.

속성	설명
reversed	목록의 순서가 내림차순인지, 아니면 기본값인 오름차순인지를 설정하거나 반환합니다.
start	순서 있는 목록의 start 속성 값, 즉 번호 매기기가 시작되는 숫자를 설정하거나 반환합니다.
type	순서 있는 목록의 type 속성 값(숫자, 로마자, 알파벳 등)을 설정하거나 반환합니다.

예제: Ol start 속성 활용하기

다음 예제는 start 속성을 사용하여 목록의 시작 번호를 동적으로 변경하는 방법을 보여줍니다. 버튼을 클릭하면 2부터 시작하는 목록이 1부터 시작하도록 수정됩니다.

코드

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol start</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    ol{
        width: 30%;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Ol-start</legend>
            <h3>Students</h3>
            <ol id="orderList" start='2'>
                <li>Zampa</li>
                <li>Rajesh</li>
                <li>Eden</li>
                <li>Bina</li>
                <li>Alex</li>
                <li>Adam</li>
            </ol>
            <input type="button" onclick="reverseNumbering()" value="Correct list">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var studentList = document.getElementById("orderList");
    function reverseNumbering() {
        studentList.start = '1';
        divDisplay.textContent = 'List Corrected';
    }
</script>
</body>
</html>

실행 결과

'Correct List' 버튼을 클릭하기 전에는 목록이 2번부터 시작됩니다.

HTML DOM Ol 객체 완벽 가이드 – 속성과 활용 예제

버튼을 클릭한 후에는 start 속성이 '1'로 변경되어 목록이 1번부터 올바르게 시작됩니다.

HTML DOM Ol 객체 완벽 가이드 – 속성과 활용 예제

이처럼 DOM의 Ol 객체를 활용하면 페이지를 새로고침하지 않고도 순서 있는 목록의 번호 매기기를 실시간으로 조정할 수 있어, 동적인 웹 인터페이스를 구현하는 데 유용합니다.