문서 객체 모델(DOM)은 HTML 문서 구조를 객체로 표현한 것이에요. 영어로는 Document Object Model이라고 하지만 약어인 DOM으로 주로 표기돼요. 그래서 한국어로도 '돔'이라고 불리고요.
그럼 '문서 구조'는 무엇일까요? HTML 문서에는 <body>, <p> 등 여러 태그가 문서의 구조를 이루고 있어요. 이런 여러 HTML 요소의 계층을 반영해서 만든 객체가 DOM이에요. HTML 문서를 객체로 표현하면 JavaScript와 같은 스크립트 및 프로그래밍 언어가 웹페이지에 접근할 수 있어요.
즉, DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 해요.
각 언어마다 DOM에 접근하는 방법이 다른데요. JavaScript에서는 대표적으로 HTML 요소의 id 선택자를 사용하는 document.getElementByld("#id") 메서드가 있어요. 또 React에서는 useRef() 함수를 사용해서 DOM에 접근할 수 있어요.
DOM의 계층 구조
DOM은 HTML 문서 구조의 계층을 표현하는 객체인데요. DOM의 계층은 트리 자료 구조로 구축돼요. 트리 자료 구조는 하나의 최상위 노드(Node)에서 다른 자식 노드들이 뻗어나가는 구조예요.
아래 예시와 같이 document 노드가 맨 위에 있고 이어서 element, text, attribute 노드가 나오는 계층적 구조가 있는 것을 볼 수 있어요.
DOM이 생성되는 순서
HTML 웹 페이지는 HTML 파서에 의해 DOM으로 변환돼요. 하지만 여기서 파서가 <script> 태그를 만나면 어떻게 될까요? 파서는 DOM 생성을 중지하고 자바스크립트 엔진이 script에 정의된 파일 및 코드를 실행해요. 스크립트 실행이 완료되면 다시 HTML 파서가 DOM 생성을 다시 시작해요.
즉, 브라우저는 동기적으로 HTML과 JavaScript를 처리하기 때문에 <script> 태그의 위치에 따라 DOM 생성이 느려질 수 있어요. 그렇기 때문에 <script> 태그는 HTML 문서 맨 하단에 넣는 것을 추천해요. DOM 생성이 지연되지 않고, 스크립트에 DOM을 접근하는 코드가 있다면 제대로 실행되지 않기 때문이에요.
이런 이유로 토스페이먼츠 결제위젯을 연동할 때도 DOM이 생성된 이후에 반드시 결제 UI를 렌더링해야 돼요.