JavaScript 입문 도구

JavaScript DOM 조작

JavaScript DOM 조작 — 초급

DOM 조작

1. 도입 (왜 배워야 하는가)

DOM(Document Object Model) 조작은 웹 개발에서 매우 중요한 기술입니다. 웹 페이지의 내용을 동적으로 변경하거나, 사용자와의 상호작용을 처리하는 데 필수적입니다. 예를 들어, 사용자가 버튼을 클릭했을 때 특정 내용을 바꾸거나, 데이터를 입력받아 화면에 표시하는 작업은 모두 DOM 조작을 통해 이루어집니다.

이 기술을 모르면, 웹 페이지는 정적인 상태로만 남아 있어 사용자 경험이 떨어집니다. 예를 들어, 쇼핑몰 사이트에서 사용자가 장바구니에 상품을 추가하더라도 페이지가 새로고침되지 않고 변경된 내용을 즉시 반영하지 못하면 사용자에게 혼란을 줄 수 있습니다.

2. 핵심 개념 설명

DOM (Document Object Model)

DOM은 HTML 문서의 구조를 표현한 객체 모델입니다. 이를 통해 JavaScript로 HTML 요소를 조작할 수 있습니다.

비유: DOM을 집으로 생각해보세요. 집의 각 방과 가구가 HTML 요소에 해당합니다. JavaScript는 집의 구조를 변경하거나 가구를 이동시키는 역할을 합니다.

주요 용어 정리

용어	설명
요소 (Element)	HTML 문서의 기본 구성 요소(예: `<div>`, `<p>`)
선택자 (Selector)	특정 요소를 선택하는 방법 (예: `document.getElementById()`)
이벤트 (Event)	사용자의 행동 (예: 클릭, 키 입력)에 대한 반응

3. 기본 코드 예제

아래 코드는 특정 ID를 가진 요소의 내용을 변경하는 방법을 보여줍니다.

// HTML 요소를 선택
const element = document.getElementById('myElement');

// 요소의 내용을 변경
element.innerHTML = '안녕하세요, DOM 조작을 배우고 있습니다!';

실행 결과:

화면에 "안녕하세요, DOM 조작을 배우고 있습니다!"라는 글자가 표시됩니다.

코드 한 줄씩 동작 설명:

const element = document.getElementById('myElement');

- ID가 'myElement'인 HTML 요소를 선택하여 element 변수에 저장합니다.

element.innerHTML = '안녕하세요, DOM 조작을 배우고 있습니다!';

- 선택한 요소의 내부 HTML 내용을 변경하여 새로운 텍스트를 삽입합니다.

4. 실전 활용 예제

예제 1: 버튼 클릭 시 내용 변경

쇼핑몰에서 "장바구니에 추가" 버튼을 클릭하면 상품의 이름이 장바구니에 추가되는 예제를 보겠습니다.

// 버튼 클릭 시 호출될 함수
function addToCart() {
    const cart = document.getElementById('cart');
    cart.innerHTML += '<p>상품이 장바구니에 추가되었습니다!</p>';
}

// 버튼에 이벤트 리스너 추가
document.getElementById('addButton').addEventListener('click', addToCart);

상황 설명: 사용자가 "장바구니에 추가" 버튼을 클릭하면, 해당 행동에 따라 장바구니에 메시지가 추가됩니다. 페이지를 새로고침하지 않고도 사용자에게 즉각적인 피드백을 제공합니다.

예제 2: 입력 필드의 내용 실시간 반영

사용자가 입력한 내용을 실시간으로 보여주는 예제입니다.

// 입력 필드와 결과 표시할 요소 선택
const inputField = document.getElementById('inputField');
const output = document.getElementById('output');

// 입력 필드의 값이 변경될 때마다 호출되는 함수
inputField.addEventListener('input', function() {
    output.innerHTML = inputField.value;
});

상황 설명: 사용자가 입력 필드에 글자를 입력할 때마다, 그 내용이 실시간으로 아래의 결과 요소에 반영됩니다. 이는 사용자 경험을 향상시키는 데 유용합니다.

5. 흔한 실수와 주의사항

실수 1: DOM 요소가 로드되기 전에 접근하기

잘못된 코드:

  const element = document.getElementById('myElement');
  element.innerHTML = '내용 변경';

올바른 코드:

  window.onload = function() {
      const element = document.getElementById('myElement');
      element.innerHTML = '내용 변경';
  };

실수 2: 이벤트 리스너 중복 등록

잘못된 코드:

  document.getElementById('myButton').addEventListener('click', function() {
      alert('버튼 클릭');
  });

올바른 코드:

  const button = document.getElementById('myButton');
  button.addEventListener('click', function() {
      alert('버튼 클릭');
  });

6. 정리

DOM 조작은 웹 페이지의 동적인 요소를 제어하는 데 필수적입니다.
자바스크립트를 통해 HTML 요소를 선택하고 변경할 수 있습니다.
이벤트 리스너를 활용하여 사용자와의 상호작용을 처리할 수 있습니다.
DOM 요소에 접근할 때는 항상 페이지가 완전히 로드된 후에 작업해야 합니다.

다음에 학습하면 좋은 주제: 이벤트 전파와 버블링, AJAX를 통한 비동기 데이터 처리.