DOM 조작을 활용한 동적 웹 페이지 구현

웹 개발에 관심 있는 주니어 개발자 여러분, 웹 페이지를 더 생동감 있고 사용자 친화적으로 만들고 싶으신가요? 그렇다면, DOM(Document Object Model) 조작에 대해 알아야 할 시간입니다! DOM 조작은 웹 페이지의 구조, 스타일, 내용을 동적으로 변경할 수 있는 강력한 방법을 제공합니다. 이 글에서는 DOM 조작의 기초와 함께, 간단한 예제를 통해 동적 웹 페이지를 구현하는 방법을 알아보겠습니다.

DOM이란 무엇인가요?

DOM은 웹 페이지를 브라우저가 이해할 수 있는 구조로 만들어주는 모델입니다. HTML 문서를 트리 구조로 변환하여, 각 요소를 노드(node)로 표현합니다. 이를 통해 자바스크립트를 사용하여 웹 페이지의 요소를 쉽게 선택, 수정, 추가 또는 삭제할 수 있습니다.

기본적인 DOM 조작 방법

DOM 조작을 시작하기 전에, 웹 페이지의 특정 요소를 선택하는 방법을 알아야 합니다. document.getElementById(), document.getElementsByClassName(), document.querySelector() 등의 메소드를 사용할 수 있습니다.

요소 선택하기

const title = document.getElementById('title');
const items = document.getElementsByClassName('item');
const button = document.querySelector('.button');

요소 내용 변경하기

선택한 요소의 내용을 변경하려면, textContent 또는 innerHTML 속성을 사용할 수 있습니다.

title.textContent = '새로운 제목';

요소 스타일 변경하기

요소의 스타일을 변경하려면, style 속성을 사용합니다.

title.style.color = 'blue';

요소 추가 및 삭제하기

새로운 요소를 추가하거나 기존 요소를 삭제할 수도 있습니다.

// 새 요소 추가
const newElement = document.createElement('div');
newElement.textContent = '새로운 요소';
document.body.appendChild(newElement);

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

실제 예제: 사용자 입력에 반응하는 리스트 만들기

이제 배운 내용을 토대로, 사용자 입력을 받아 리스트에 항목을 추가하는 간단한 예제를 만들어보겠습니다.

HTML:

<input type="text" id="inputField" placeholder="항목 추가">
<button id="addButton">추가</button>
<ul id="list"></ul>

JavaScript:

const addButton = document.getElementById('addButton');
const inputField = document.getElementById('inputField');
const list = document.getElementById('list');

addButton.addEventListener('click', function() {
    const newItem = document.createElement('li');
    newItem.textContent = inputField.value;
    list.appendChild(newItem);
    inputField.value = ''; // 입력 필드 초기화
});

이 예제는 사용자가 텍스트 필드에 텍스트를 입력하고 '추가' 버튼을 클릭하면, 해당 텍스트를 리스트에 새 항목으로 추가합니다. 이처럼 DOM 조작을 통해 웹 페이지에 동적인 요소를 추가하여 사용자 경험을 향상시킬 수 있습니다.

DOM 조작은 웹 개발의 핵심이며, 이를 통해 웹 페이지를 더욱 동적이고 상호작용적으로 만들 수 있습니다. 여러분도 이 기초를 바탕으로 다양한 프로젝트에 도전해보세요!