HTML DOM DL 객체 – 자바스크립트로 설명 목록 동적으로 만들기

HTML DOM DL 객체란?

HTML DOM의 dl 객체는 HTML <dl> 요소와 연결된 객체입니다. <dl> 요소는 설명 목록(description list)을 만들 때 사용되며, 용어(<dt>)와 그에 대한 설명(<dd>)을 쌍으로 구성하는 리스트입니다.

dl 객체를 활용하면 JavaScript를 통해 <dl> 요소를 동적으로 생성하고 접근할 수 있어, 페이지 로딩 후에도 사용자 인터랙션에 따라 목록을 실시간으로 추가할 수 있습니다.

구문

JavaScript로 새로운 설명 목록을 생성하는 기본 구문은 다음과 같습니다.

var p = document.createElement("DL");

예제

버튼을 클릭하면 설명 목록이 화면에 추가되는 간단한 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<h2>DL 객체 예제</h2>
<p>아래 버튼을 클릭하면 설명 목록이 생성됩니다.</p>
<button onclick="createDesc()">CREATE</button>
<script>
    function createDesc() {
        var Desc = document.createElement("DL");
        var DesT = document.createElement("DT");
        var tn = document.createTextNode("Mango");
        DesT.appendChild(tn);
        var data = document.createElement("DD");
        var tn1 = document.createTextNode("Mango is the king of fruits");
        data.appendChild(tn1);
        document.body.appendChild(Desc);
        Desc.appendChild(DesT);
        Desc.appendChild(data);
    }
</script>
</body>
</html>

출력 결과

페이지를 실행하면 CREATE 버튼이 표시됩니다. 버튼을 클릭하면 다음과 같이 설명 목록이 동적으로 추가됩니다.

Mango — Mango is the king of fruits

코드 설명

위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.

1. 버튼 생성 및 이벤트 연결

먼저 클릭 시 createDesc() 함수를 실행하는 CREATE 버튼을 만듭니다.

<button onclick="createDesc()">CREATE</button>

2. 요소 및 텍스트 노드 생성

createDesc() 함수는 document 객체의 createElement() 메서드를 사용해 <dl>, <dt>, <dd> 요소를 생성하고, 각각 Desc, DesT, data 변수에 할당합니다.

이후 createTextNode() 메서드로 <dt>와 <dd>에 들어갈 텍스트 노드를 만들고, appendChild() 메서드를 이용해 각각의 부모 요소에 추가합니다.

3. 문서에 목록 추가

마지막으로 <dt>(용어)와 <dd>(설명)를 <dl>에 차례대로 붙인 뒤, 완성된 <dl> 전체를 appendChild()로 문서의 body에 추가하여 화면에 표시합니다.

function createDesc() {
    var Desc = document.createElement("DL");
    var DesT = document.createElement("DT");
    var tn = document.createTextNode("Mango");
    DesT.appendChild(tn);
    var data = document.createElement("DD");
    var tn1 = document.createTextNode("Mango is the king of fruits");
    data.appendChild(tn1);
    document.body.appendChild(Desc);
    Desc.appendChild(DesT);
    Desc.appendChild(data);
}

정리

<dl>은 용어와 설명을 짝지어 보여주는 시맨틱한 목록 요소입니다. 위 예제처럼 createElement(), createTextNode(), appendChild() 세 가지 핵심 메서드만 익히면, 버튼 클릭 한 번으로 원하는 구조의 설명 목록을 언제든 동적으로 만들어 넣을 수 있습니다.