Document Object Model(DOM)

웹페이지를 개발하다 보면 DOM(Document Object Model)이 자주 등장한다. DOM은 단순히 HTML 문서를 보여주는 것이 아니라, 웹 문서를 프로그래밍적으로 접근하고 조작할 수 있는 트리 구조의 모델이다. 브라우저는 HTML과 CSS를 파싱해 DOM과 CSSOM을 생성하고, 이를 결합해 렌더 트리를 만들기 때문에 DOM을 이해하는 것은 웹 개발의 핵심이다.

 

1. DOM 이란?

DOM은 웹 문서의 구조화된 표현을 제공하며, HTML이나 XML 문서의 모든 요소, 속성, 텍스트를 노드로 나타낸다. 트리 구조를 가지고 있어 각 요소는 부모와 자식 관계를 갖고, 개발자는 이를 통해 특정 노드에 접근하거나 조작할 수 있다.

예를 들어 자바스크립트를 사용하면 페이지의 내용을 동적으로 변경할 수 있다.

document.getElementById('title').textContent = 'DOM 이해하기';

 

2. DOM 조작 방법

DOM을 조작하는 방법에는 크게 5가지가 있다.

1. 요소 선택 - getElementById, getElementsByClassName, querySelector 등으로 원하는 요소를 선택할 수 있다.
2. 요소 생성 - document.createElement로 새로운 요소를 만들 수 있다.
3. 요소 추가/제거 - appendChild, insertBefore, removeChild, replaceChild 등을 사용해 트리에 요소를 추가하거나 삭제할 수 있다.
4. 속성 변경 - setAttribute, getAttribute, removeAttribute로 요소 속성을 제어할 수 있다.
5. 내용 변경 - innerHTML은 HTML 태그를 포함한 콘텐츠를 설정하고, textContent는 텍스트만 변경한다.

 

// innerHTML
document.getElementById('example').innerHTML = '<b>Bold Text</b>';

// textContent
document.getElementById('example').textContent = 'Plain Text';

주의 - innerHTML은 DOM을 다시 생성하기 때문에 성능과 보안에 영향을 줄 수 있고, textContent는 단순 텍스트만 처리하므로 안전하다.

 

3. DOM 이벤트 처리

웹에서는 다양한 이벤트가 발생한다. 클릭, 키 입력, 마우스 이동뿐만 아니라 DOM 자체가 변할 때도 이벤트가 발생한다. 자바스크립트에서는 addEventListener를 통해 이벤트 핸들러를 등록할 수 있다.

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

 

이벤트 위임(Event Delegation)

많은 자식 요소에 이벤트를 등록해야 할 때, 부모 요소에 한 번만 등록하는 것이 효율적이다. 이를 이벤트 위임이라고 한다.

이 방법을 사용하면 메모리 사용량을 줄이고, 동적으로 생성된 요소에도 이벤트를 적용할 수 있다.

document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target && event.target.matches('li.item')) {
        console.log('리스트 아이템 클릭!');
    }
});

 

4. DOM과 성능 최적화

DOM 조작은 브라우저의 렌더링에 직접 영향을 준다. 요소를 반복적으로 수정하면 리플로우(Reflow)와 리페인트(Repaint)가 발생해 성능이 떨어진다. (리플로우와 리페인트 알아보기)

 

이를 최소화하는 방법은 다음과 같다.

• 여러 번 수정하지 말고, DocumentFragment나 변수에 모아 한 번에 적용
• 인라인 스타일보다 CSS 클래스 토글을 사용
• 자주 변경되는 요소를 최소화하고, DOM 접근 횟수를 줄임

 

5. 마무리

DOM은 단순한 개념 같지만, 페이지 구조와 이벤트 처리, 성능 최적화까지 연결되어 있어 웹 개발의 기초이자 핵심이다. 코드를 직접 작성하고 실습하며 DOM의 동작 원리를 체감하여 빠르게 이해해보자.