DOM

📖 상세 설명

DOM(Document Object Model)은 HTML, XML 문서를 트리 구조의 객체 모델로 표현하는 프로그래밍 인터페이스입니다. W3C에서 표준화했으며, JavaScript가 웹 페이지의 구조, 스타일, 콘텐츠를 동적으로 읽고 수정할 수 있게 합니다. 브라우저가 HTML을 파싱하면 DOM 트리가 생성됩니다.

DOM 트리는 노드(Node)로 구성됩니다. Document(문서), Element(요소), Text(텍스트), Attribute(속성) 등의 노드 타입이 있으며, 부모-자식-형제 관계로 연결됩니다. document.getElementById(), querySelector() 같은 메서드로 노드를 탐색하고, appendChild(), removeChild()로 조작합니다.

DOM 조작은 비용이 큰 작업입니다. DOM 변경 시 브라우저는 Reflow(레이아웃 재계산)와 Repaint(화면 다시 그리기)를 수행합니다. 이 때문에 React, Vue 같은 프레임워크는 Virtual DOM을 사용해 변경 사항을 메모리에서 비교한 후 최소한의 실제 DOM 업데이트만 수행합니다.

이벤트도 DOM을 통해 처리됩니다. 클릭, 키 입력 등의 이벤트는 DOM 트리를 따라 버블링(하위→상위) 또는 캡처링(상위→하위) 방식으로 전파됩니다. 이벤트 위임(Event Delegation) 패턴을 활용하면 많은 자식 요소에 개별 리스너를 달지 않고 부모에서 효율적으로 처리할 수 있습니다.

💻 코드 예제

// DOM 요소 탐색
const container = document.getElementById('app');
const buttons = document.querySelectorAll('.btn');
const firstCard = document.querySelector('.card:first-child');

// DOM 요소 생성 및 추가
const newElement = document.createElement('div');
newElement.className = 'card';
newElement.innerHTML = `
  <h3>새 카드</h3>
  <p>동적으로 생성된 콘텐츠</p>
`;
container.appendChild(newElement);

// 여러 요소 추가 시 DocumentFragment 사용 (성능 최적화)
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `아이템 ${i + 1}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);
// → DOM 조작이 한 번만 발생 (100번 vs 1번)

// 이벤트 위임 (Event Delegation)
document.getElementById('todo-list').addEventListener('click', (e) => {
  // 클릭된 요소가 삭제 버튼인지 확인
  if (e.target.matches('.delete-btn')) {
    const todoItem = e.target.closest('.todo-item');
    todoItem.remove();
  }

  // 체크박스 클릭
  if (e.target.matches('.todo-checkbox')) {
    const todoItem = e.target.closest('.todo-item');
    todoItem.classList.toggle('completed');
  }
});

// 속성 및 스타일 조작
const card = document.querySelector('.card');
card.setAttribute('data-id', '123');
card.style.transform = 'translateY(-5px)';
card.classList.add('active');
card.classList.remove('hidden');

🗣️ 실무 대화 예시

⚠️ 주의사항

• 🚫
  innerHTML로 사용자 입력 삽입: innerHTML에 사용자 입력을 직접 넣으면 XSS 공격에 취약합니다. textContent나 createTextNode()를 사용하거나, DOMPurify 같은 라이브러리로 sanitize하세요.
• 🚫
  레이아웃 스래싱(Layout Thrashing): 읽기(offsetHeight)와 쓰기(style.height) 작업을 번갈아 하면 강제 동기 레이아웃이 발생합니다. 읽기를 먼저 모아서 하고 쓰기를 나중에 하세요.
• 🚫
  메모리 누수: 이벤트 리스너를 등록한 DOM 요소를 제거할 때 리스너도 함께 제거하지 않으면 메모리 누수가 발생합니다. removeEventListener()를 호출하거나 WeakMap을 활용하세요.

🔗 관련 용어

📚 더 배우기