HTML DOM ul 객체 – 순서 없는 목록 요소 생성과 제어 방법

HTML DOM에서 ul 객체는 HTML 문서의 <ul>(순서 없는 목록) 요소를 나타냅니다. 이 객체를 활용하면 JavaScript로 목록을 동적으로 생성하거나 조작할 수 있습니다.

ul 객체 생성하기

createElement() 메서드를 사용하면 <ul> 요소를 동적으로 만들 수 있습니다.

var ulObject = document.createElement("UL");

ul 객체의 주요 속성

생성된 ulObject는 아래와 같은 속성을 가질 수 있습니다. 단, 이 속성들은 HTML5에서는 더 이상 지원되지 않으므로 참고용으로만 알아두는 것이 좋습니다.

속성	설명
compact	순서 없는 목록을 일반적인 크기보다 작게 표시할지 여부를 설정하거나 반환합니다.
type	순서 없는 목록의 type 속성 값을 설정하거나 반환합니다.

이제 순서 없는 목록(ul) 요소를 실제로 활용한 예제를 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<title>Ul item()</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    ul{
        width: 30%;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>item( )</legend>
            <h2>Menu</h2>
            <ul>
                <li onclick="getOrder(0)">Mac & Cheese</li>
                <li onclick="getOrder(1)">Pizza</li>
                <li onclick="getOrder(2)">Burger</li>
            </ul>
            <div id="divDisplay">Click on menu item to order it</div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var menuSelect = document.getElementsByTagName("li");
    function getOrder(index) {
        divDisplay.textContent = 'Order: '+(menuSelect.item(index)).textContent;
    }
</script>
</body>
</html>

실행 결과

<li> 요소를 클릭하기 전 화면입니다.

HTML DOM ul 객체 – 순서 없는 목록 요소 생성과 제어 방법

<li> 요소를 클릭한 후에는 해당 메뉴 항목이 선택되어 주문 내역이 화면에 표시됩니다.

HTML DOM ul 객체 – 순서 없는 목록 요소 생성과 제어 방법

위 예제처럼 getElementsByTagName()으로 가져온 목록 항목에 item(index) 메서드를 사용하면 특정 인덱스의 <li> 요소에 접근할 수 있습니다. 이를 응용하면 클릭 이벤트에 따라 동적으로 콘텐츠를 변경하는 인터랙티브한 목록 UI를 쉽게 구현할 수 있습니다.