DOM 의 개념

DOM (Document Object Model)이란?

• 마크업 언어로 작성된 문서를 프로그래밍 언어(ex. Javascript)가 조작할 수 있도록 하는 인터페이스
• DOM은 계층적 구조를 가진 노드 트리로 구성된다.

DOM의 종류

• HTML DOM: HTML 문서를 조작하는 API
• XML DOM: XML 데이터를 트리 형태로 다룰 수 있는 API
• SVG DOM: SVG 그래픽을 프로그래밍적으로 변경할 수 있는 API

---

DOM은 왜 필요한가?

• 동적인 웹 페이지를 구현하려면 프로그래밍 언어가 문서에 접근하고, 제어할 수 있는 수단이 있어야 하지만 마크업 언어에는 element에 접근 가능한 인터페이스가 없기 때문이다.

---

DOM을 통해 어떤 동작을 할 수 있는가?

• 요소 조작: 문서 내에서 요소를 추가(appendChild), 제거(removeChild), 수정 가능
• 속성(Attribute) 조작: setAttribute, getAttribute 등을 활용하여 요소의 속성을 변경
• CSS 스타일 조작: element.style 또는 classList.add/remove 등을 사용해 스타일 변경
• 이벤트 처리: addEventListener를 이용해 이벤트 핸들러 추가 가능

---

DOM은 왜 계층적 구조로 표현하는가?

• 노드들 간의 관계(부모, 자식, 형제)를 명확히 정의할 수 있음.
• Event 처리에 유리한 구조이다.
• 노드의 추가, 제거, 이동 작업을 쉽게 할 수 있도록 해줌.
• 이벤트 전파(Event Propagation) 처리가 계층 구조에서 효율적으로 동작하기 때문.
  • 캡처링 (Capturing Phase): 이벤트가 최상위 요소에서 타겟 요소로 내려감.
  • 타겟 단계 (Target Phase): 실제 이벤트가 발생한 요소에서 실행됨.
  • 버블링 (Bubbling Phase): 이벤트가 다시 상위 요소로 올라감.

💡 event.stopPropagation()을 사용하면 이벤트 전파를 중단할 수 있음.

---

DOM의 주요 객체

• document: HTML 문서를 나타내는 최상위 객체
• window: 브라우저 창을 나타내는 객체, document는 window 객체의 속성
• element: DOM에서 HTML 요소를 나타내는 객체 (getElementById(), querySelector() 등으로 접근)
• node: 모든 요소, 속성, 텍스트를 포함하는 최상위 개념 (Element, Text, Comment 등 포함)

---

DOM 조작 시 성능 최적화

• DOM 조작 최소화: documentFragment를 사용하여 한 번에 여러 요소를 추가
• reflow/repaint 최소화: 여러 스타일 변경 시 classList를 활용하여 한 번에 적용
• Virtual DOM 활용: React 등의 라이브러리는 Virtual DOM을 사용해 성능 최적화