DOM

DOM(Document Object Model, 문서 객체 모델)은 HTML·XML 문서를 요소와 속성, 텍스트를 노드로 하는 트리 구조의 객체로 나타내고, 프로그램이 그 구조·내용·스타일을 읽고 바꿀 수 있게 하는 플랫폼·언어 중립적인 인터페이스이다.

개요

브라우저는 받은 HTML 문서를 해석해 메모리에 DOM 트리를 만들고, 그 트리를 화면에 그린다. 자바스크립트가 DOM 트리의 노드를 추가·삭제·수정하면 브라우저가 화면을 다시 그리므로, 페이지를 서버에서 새로 받지 않고도 내용이 바뀐다. W3C 가 1998년 DOM Level 1 을 권고했고, 지금은 WHATWG 의 DOM Living Standard 가 이어받았다.

초기에는 브라우저마다 문서를 다루는 방식이 달라 같은 스크립트가 넷스케이프와 인터넷 익스플로러에서 다르게 동작했다. DOM 표준은 이 차이를 없애려고 만든 공통 인터페이스다.

트리 구조

document
 └ html
    ├ head
    │  └ title ─ "문서 제목"
    └ body
       ├ h1 ─ "제목"
       └ p (class="note") ─ "본문"

문서 전체가 document 노드이고, 그 아래로 요소 노드·속성·텍스트 노드가 부모·자식·형제 관계로 이어진다
노드는 객체이므로 속성(값)과 메서드(동작)를 가진다

주요 인터페이스

하는 일	예
노드 찾기	getElementById(), querySelector(), getElementsByTagName()
내용 바꾸기	textContent, innerHTML, setAttribute()
구조 바꾸기	createElement(), appendChild(), removeChild()
스타일 바꾸기	element.style, classList
이벤트 처리	addEventListener("click", 함수)

표준의 발전

단계	시기	주요 내용
DOM Level 0	1990년대 중반	표준 이전에 넷스케이프·인터넷 익스플로러가 각자 만든 객체(document.forms, document.images 등). 브라우저마다 달랐다
DOM Level 1	1998, W3C 권고	문서를 노드 트리로 다루는 핵심(Core) 인터페이스와 HTML 전용 인터페이스
DOM Level 2	2000	이벤트 모델(addEventListener), 스타일(CSS) 접근, 이름공간, 트리 순회(Traversal)·범위(Range)
DOM Level 3	2004	문서 불러오기·저장(Load and Save), 문서 검증, XPath, 키보드 이벤트
DOM Living Standard	2015~, WHATWG	단계 번호를 없애고 계속 고쳐 나가는 살아 있는 표준. 브라우저가 실제로 따르는 표준이다

DOM 과 SAX

XML 문서를 프로그램에서 읽는 파서 인터페이스는 크게 DOM 방식과 SAX(Simple API for XML) 방식으로 나뉜다.

구분	DOM	SAX
처리 방식	문서 전체를 읽어 메모리에 트리를 만든 뒤 다룬다	문서를 처음부터 차례로 읽으며 요소의 시작·끝을 만날 때마다 이벤트를 일으킨다
접근	트리의 어느 노드든 임의 접근, 앞뒤로 오갈 수 있다	순차 접근. 지나간 부분으로 돌아갈 수 없다
수정	노드 추가·삭제·변경 후 다시 저장할 수 있다	읽기 전용
메모리	문서 크기에 비례해 많이 쓴다	적게 쓴다
알맞은 곳	작은 문서, 구조를 자주 오가며 고치는 경우(브라우저, 편집기)	아주 큰 문서, 한 번 훑어 필요한 값만 뽑는 경우(로그·대용량 데이터)

장단점

장점 : 언어·플랫폼에 중립적인 표준 인터페이스라 같은 방식으로 HTML·XML 을 다룬다. 문서 구조를 객체로 다루므로 내용·구조·스타일을 프로그램에서 자유롭게 바꿀 수 있다
단점 : 큰 문서는 트리를 만드는 데 메모리와 시간이 많이 든다. 브라우저에서 DOM 을 자주 바꾸면 화면 배치 계산(리플로우)과 다시 그리기가 반복되어 느려진다. React 같은 라이브러리는 이를 줄이려고 메모리 안의 가상 DOM 에서 바뀐 부분을 먼저 비교한 뒤 실제 DOM 에는 차이만 반영한다

같이 보기