DOM 조작을 활용한 인터랙티브 웹 페이지 만들기 💻

작성: 2025년 07월 28일읽기: 약 3분

웹 개발의 세계에 오신 것을 환영합니다! 오늘은 여러분이 웹 페이지를 더욱 생동감 있고 사용자 친화적으로 만들 수 있는 방법, 바로 DOM 조작에 대해 알아볼 거예요. DOM이란 '문서 객체 모델(Document Object Model)'의 약자로, 웹 페이지의 구조를 프로그래밍적으로 조작할 수 있는 API입니다. 이를 활용하면 웹 페이지의 요소를 동적으로 추가, 삭제, 수정할 수 있어요. 그럼 시작해볼까요?

DOM 조작의 기초

DOM을 조작하기 위해서는 먼저 JavaScript를 사용하여 웹 페이지의 요소를 선택해야 합니다. 가장 기본적인 방법은 document.getElementById와 document.querySelector입니다.

// ID를 사용하여 요소 선택하기
var title = document.getElementById("title");

// 쿼리 선택자를 사용하여 요소 선택하기
var button = document.querySelector(".button");

요소에 이벤트 리스너 추가하기

웹 페이지를 인터랙티브하게 만들기 위해서는 사용자의 행동에 반응할 수 있어야 합니다. 이를 위해 요소에 이벤트 리스너를 추가할 수 있어요.

button.addEventListener("click", function() {
    title.style.color = "blue";
});

위 코드는 사용자가 버튼을 클릭하면 제목의 색상을 파란색으로 변경합니다.

요소 추가 및 삭제하기

사용자와의 상호작용에 따라 요소를 동적으로 추가하거나 삭제하는 것도 가능합니다.

// 새로운 요소 생성하기
var newElement = document.createElement("p");
newElement.textContent = "새로운 내용입니다!";
document.body.appendChild(newElement);

// 요소 삭제하기
document.body.removeChild(newElement);

실습: 간단한 투두 리스트 만들기

이제 배운 내용을 활용하여 간단한 투두 리스트를 만들어볼까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>간단한 투두 리스트</title>
</head>
<body>
    <input type="text" id="todoInput">
    <button id="addTodo">추가하기</button>
    <ul id="todoList"></ul>

    <script>
        var addTodo = document.getElementById("addTodo");
        var todoInput = document.getElementById("todoInput");
        var todoList = document.getElementById("todoList");

        addTodo.addEventListener("click", function() {
            var newTodo = document.createElement("li");
            newTodo.textContent = todoInput.value;
            todoList.appendChild(newTodo);
            todoInput.value = ""; // 입력 필드 초기화
        });
    </script>
</body>
</html>

위 코드는 사용자가 입력 필드에 텍스트를 입력하고 추가하기 버튼을 클릭하면, 입력한 텍스트가 목록에 추가되는 간단한 투두 리스트입니다.

이제 여러분도 DOM 조작을 활용하여 웹 페이지를 더욱 동적이고 사용자 친화적으로 만들 수 있게 되었어요. 계속 연습하면서 여러분만의 멋진 웹 페이지를 만들어보세요!