HTML DOM Li 객체 이해하기: 속성과 활용 예제

HTML DOM에서 Li 객체는 HTML 문서 내의 <li>(목록 항목) 요소를 대표하는 객체입니다. <ol>(순서 있는 목록)이나 <ul>(순서 없는 목록) 안에 포함된 각 항목을 자바스크립트로 동적으로 제어할 때 사용됩니다.

문법(Syntax)

<li> 요소를 다루는 기본 문법은 다음과 같습니다.

<li> 요소 생성하기

var liObject = document.createElement("LI")

위 코드는 createElement() 메서드를 사용하여 새로운 목록 항목 요소를 만들고, 이를 변수에 저장한 뒤 필요한 위치에 추가하는 방식으로 활용합니다.

주요 속성(Properties)

Li 객체에서 사용할 수 있는 주요 속성은 다음과 같습니다.

속성	설명
value	<li> 요소의 value 속성 값을 가져오거나 설정합니다. 순서 있는 목록(<ol>)에서 해당 항목의 번호를 지정할 때 유용합니다.

예제(Example)

다음은 Li value 속성을 활용한 실전 예제입니다. 경기 결과 목록에서 부정 행위자를 제외하고 순위를 재조정하는 시나리오입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM value</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-value</legend>
<h3>Race Result</h3>
<ol id="race">
<li>Alex</li>
<li>Eden</li>
<li>Samuel</li>
<li>Zampa</li>
</ol>
<input type="button" onclick="rectifyResult()" value="Alex Cheated">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var studentList = document.getElementsByTagName("li");
    var race = document.getElementById("race");
    function rectifyResult() {
        studentList[1].value = '1';
        studentList[2].value = '2';
        studentList[3].value = '3';
        race.removeChild(studentList[0])
        divDisplay.textContent = 'Alex is disqualified';
    }
</script>
</body>
</html>

코드 설명

이 예제의 동작 방식을 살펴보면 다음과 같습니다.

1. getElementsByTagName("li")로 목록의 모든 <li> 요소를 배열 형태로 가져옵니다.
2. 버튼을 클릭하면 rectifyResult() 함수가 실행되어 나머지 참가자들의 value 속성을 1, 2, 3으로 재설정합니다.
3. removeChild() 메서드로 첫 번째 항목(Alex)을 목록에서 제거합니다.
4. 결과 화면에 'Alex is disqualified'(Alex 실격 처리)라는 메시지를 표시합니다.

실행 결과(Output)

위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.

'Alex Cheated' 버튼 클릭 전 -

HTML DOM Li 객체 이해하기: 속성과 활용 예제

'Alex Cheated' 버튼 클릭 후 -

HTML DOM Li 객체 이해하기: 속성과 활용 예제

버튼을 클릭하면 Alex 항목이 목록에서 사라지고, Eden부터 Zampa까지의 순번이 value 속성에 의해 1, 2, 3으로 자동 조정되는 것을 확인할 수 있습니다.