자바스크립트 DOM 조작 실습 예제

웹 개발의 세계에 발을 들여놓으면, 자주 마주치는 개념 중 하나가 바로 DOM입니다. DOM은 Document Object Model의 약자로, 웹 문서의 구조를 객체 형태로 표현하는 모델입니다. 즉, HTML 문서의 각 요소들이 객체화되어 웹 페이지를 구성하게 됩니다. 이 모델을 통해 자바스크립트는 웹 페이지의 내용과 구조를 동적으로 조작할 수 있게 되며, 이는 현대 웹 개발에서 매우 중요한 요소입니다.

DOM의 기본 개념

DOM은 웹 페이지를 트리 형태로 조직화합니다. 각 HTML 요소는 이 트리의 ‘노드’로 표현되며, 이러한 구조는 마치 가족 나무처럼 부모와 자식 간의 관계를 나타냅니다. 예를 들어, , , 와 같은 요소들은 서로 중첩된 형태로 존재하며, 자바스크립트는 이들 노드에 접근하여 다양한 작업을 수행할 수 있습니다.

DOM이 작동하는 방식

브라우저는 HTML을 읽어들이고, 이를 DOM 트리로 변환합니다. 이 과정은 웹 페이지의 각 요소가 어떻게 배치되고 연결되는지를 이해하는 데 필수적입니다. 웹 페이지가 로드될 때, 각 요소는 자바스크립트를 통해 접근하고 조작할 준비가 됩니다. 단순히 텍스트를 변경하거나 새로운 요소를 추가하는 것부터, 이벤트를 통해 사용자와 상호작용하는 기능까지, 다양한 작업을 수행할 수 있습니다.

자바스크립트로 DOM 조작하기

자바스크립트를 사용하여 DOM을 조작하는 방법은 다양합니다. 필요한 요소를 선택하고, 해당 요소의 콘텐츠나 속성을 수정하는 방법을 익히면 됩니다. 이 과정에서 가장 많이 사용되는 메서드는 다음과 같습니다:

• document.getElementById(): 특정 ID를 가진 요소를 선택합니다.
• document.querySelector(): CSS 선택자를 사용하여 하나의 요소를 선택합니다.
• document.createElement(): 새로운 HTML 요소를 생성합니다.
• element.appendChild(): 생성한 요소를 DOM에 추가합니다.

예제: 간단한 버튼 클릭 이벤트 처리하기

이제 실제로 웹 페이지에서 버튼을 클릭했을 때 동작하는 간단한 코드를 작성해보겠습니다. 아래 코드는 버튼을 클릭하면 메시지를 변경하는 기능을 포함하고 있습니다.

document.getElementById("myButton").addEventListener("click", function() {
  document.getElementById("message").textContent = "버튼이 클릭되었습니다!";
});

이 코드는 “myButton”이라는 ID를 가진 버튼을 클릭했을 때, “message”라는 ID를 가진 요소의 내용을 변경합니다. 이를 통해 사용자는 동적인 사용자 경험을 하게 됩니다.

DOM 접근 방법

DOM에 접근하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 ID, 클래스, 태그 이름을 이용하는 것입니다. 이 방법들을 통해 웹 페이지 내에서 원하는 요소를 손쉽게 선택할 수 있습니다.

웹 페이지에서 요소 선택하기

다음은 요소를 선택하는 다양한 방법입니다:

• id 속성으로 요소를 선택: document.getElementById('elementId');
• CSS 선택자로 요소를 선택: document.querySelector('.className');
• 클래스명으로 요소를 선택: document.getElementsByClassName('className');
• 태그명으로 요소를 선택: document.getElementsByTagName('tagName');

이벤트와 DOM의 상호작용

웹 페이지의 동적인 요소는 사용자의 이벤트에 의해 발생합니다. 사용자가 버튼을 클릭하거나 텍스트를 입력할 때, 자바스크립트는 이러한 이벤트에 따라 DOM을 조작하여 반응을 생성합니다. 예를 들어, 버튼 클릭 시 해당 버튼의 텍스트를 변경하는 코드입니다.

const button = document.querySelector("button");
button.addEventListener("click", () => {
  button.textContent = "내가 클릭되었어!";
});

이러한 형태의 코드는 사용자와의 상호작용을 통해 동적 웹 페이지를 만들 수 있게 합니다.

DOM 조작 실습 예제

이제 간단한 Todo 리스트를 만들어보겠습니다. 사용자가 새로운 아이템을 입력하고 추가할 수 있는 기능을 구현합니다.

const addButton = document.getElementById('add-todo');
addButton.addEventListener('click', function() {
  const newTodo = document.getElementById('new-todo').value;
  const newLi = document.createElement('li');
  newLi.textContent = newTodo;
  document.getElementById('todo-list').appendChild(newLi);
});

위 코드를 통해 사용자가 입력한 Todo 아이템을 리스트에 추가하고, 새로운 요소가 동적으로 생성되는 것을 확인할 수 있습니다.

DOM 성능 최적화 팁

DOM을 효율적으로 조작하면 웹 페이지의 성능을 크게 향상시킬 수 있습니다. 다음은 성능 최적화를 위한 몇 가지 팁입니다:

• DocumentFragment: 여러 요소를 DOM에 추가하기 전에 DocumentFragment를 사용하여 성능을 개선할 수 있습니다.
• Batch DOM Updates: 여러 요소를 한 번에 업데이트하여 렌더링을 최소화하세요.

이러한 기법들을 통해 웹 페이지의 로딩 속도를 향상시키고, 사용자에게 더 나은 경험을 제공할 수 있습니다.

마무리하며

자바스크립트 DOM 조작은 현대 웹 개발에서 필수적인 기술입니다. DOM을 이해하고 활용하는 능력은 사용자가 상호작용하는 동적 웹 페이지를 만드는 데 매우 중요합니다. 여러분이 배운 내용을 기반으로 다양한 프로젝트를 진행해보며 경험을 쌓아보시기 바랍니다.

자주 묻는 질문 FAQ