DOM API

The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents.

— W3C DOM Level 1 표준 명세서 정의

리액트니 뷰니 하는 화려한 기술에 가려져 신입들에게 무시받곤 하지만, 결국 그 모든 프레임워크가 내부적으로 브라우저를 움직이기 위해 바짓가랑이 붙잡고 매달리는 원천 기술. ~~querySelector와 appendChild를 반복해 작성하다 보면 왜 선배들이 리액트를 만들었는지 뼈저리게 감사하게 된다.(...)~~

1. 개요

HTML 또는 XML 문서의 구조적 표현이자, 브라우저가 화면을 그리기 위해 가공한 트리 형태의 데이터 구조(DOM Tree)를 프로그래밍 언어로 조작할 수 있도록 돕는 시스템 인터페이스(API). JavaScript를 이용해 웹 페이지의 요소들을 동적으로 추가, 삭제, 수정, 감시할 수 있도록 만드는 핵심 기틀이다. 현대 프론트엔드 개발에서 React나 Vue 같은 라이브러리를 사용해 DOM 조작을 자동화하기 전에는, 개발자들이 직접 DOM API의 수많은 함수들을 일일이 호출하며 피와 땀으로 화면을 빚어냈다.

2. 트리 구조와 노드(Node) 인터페이스

브라우저가 HTML 문서를 읽어 들이면 각 태그와 텍스트, 속성들은 모두 Node라는 객체로 변환되어 트리 형태로 엮인다. DOM API는 이 트리의 최상위 객체인 document를 통해 진입할 수 있는 다양한 도구를 지원한다. 특정 요소를 찾는 getElementById, querySelector부터 새로운 요소를 동적으로 찍어내는 createElement, 그리고 트리 구조를 바꾸는 appendChild, removeChild 등이 대표적이다.¹ 하지만 이 API들은 기본적으로 매우 로우레벨(low-level) 동작을 수행하기 때문에, 단순한 입력 폼 하나를 만들 때도 수십 줄의 명령문을 직렬로 낭독하듯 코딩해야 하는 피로도를 유발한다.

3. 직접 조작의 병목과 프레임워크의 탄생

DOM API를 직접 호출해 화면을 고치는 것은 브라우저의 화면 렌더링 파이프라인(Reflow 및 Repaint)을 다이렉트로 자극하는 일이다. 요소 하나를 추가하거나 스타일을 변경할 때마다 브라우저가 화면의 레이아웃을 다시 계산하고 색칠해야 하므로, 대규모 웹 서비스에서 직접 DOM을 무차별로 때려 수정하면 심각한 성능 저하가 터진다. 이러한 연산 병목을 예방하고 화면와 데이터 상태를 자동으로 일치시켜 주기 위해 등장한 개념이 바로 React의 가상 DOM(Virtual DOM)이다. 현대 개발자들은 이제 이 원시적인 API들을 직접 다룰 일이 극히 드물어졌지만, 특정 외부 라이브러리를 결합하거나 브라우저 고유 스크롤, 포커스 제어 등의 미세 조정을 위해서는 결국 DOM API 지식이 절대적인 승부처로 작용한다.

4. 관련 밈 및 드립

4.1. jQuery의 황금기와 몰락

과거 길고 괴랄한 순수 DOM API(document.getElementById('my-id').addEventListener(...))를 간결한 달러 표시($('#my-id').on(...))로 축약해주어 웹 생태계를 평정했던 전설의 도구. 하지만 싱글 페이지 애플리케이션(SPA) 시대가 도래하고 DOM 직접 조작이 악으로 규정되면서, 오늘날에는 레거시 시스템의 상징이자 신규 프로젝트에서는 절대 마주치지 말아야 할 퇴물 취급을 받고 있다.(...)

4.2. document.querySelector('body')

웬만한 UI 조작은 라이브러리가 알아서 다 해주지만, 스크립트 하나로 간단하게 브라우저를 해킹하거나 크롤링 매크로를 짤 때 무조건 가장 먼저 치게 되는 마법의 타이핑. 프론트엔드 구직 시장에서 코딩테스트나 과제 전형 때 라이브러리 사용을 전면 금지할 경우, 수많은 React 전사들이 이 querySelector의 파라미터 이름을 까먹어 탈락의 수모를 겪는다는 슬픈 전설이 전해진다.

5. 여담

HTML5와 querySelector의 승리: 과거에는 getElementsByClassName 같은 복잡하고 긴 이름의 메서드를 썼으나, CSS 선택자를 그대로 투입할 수 있는 querySelector와 querySelectorAll이 표준으로 제정되면서 다른 모든 검색 API들은 사실상 조용히 뒷방 늙은이 신세가 되었다.
Event Bubbling과의 싸움: DOM API를 다룰 때 가장 머리 아픈 것 중 하나가 하위 요소에서 발생한 이벤트가 상위 요소로 퐁퐁퐁 타고 올라가는 '이벤트 버블링' 현상이다. 이를 통제하기 위해 stopPropagation()을 사방에 덕지덕지 바르다가 코드가 엉망진창 꼬이는 경우가 다반사다.
원래 이름은 그냥 DOM: 사실 API라는 꼬리표 없이 'DOM(Document Object Model)' 자체가 문서 자체를 표현하는 모델 표준을 일컫는다. 하지만 개발자들 사이에서는 자바스크립트로 DOM을 제어하는 제어 함수들을 통칭해 'DOM API'라고 구전되어 오고 있다.

6. 관련 문서

게다가 과거 인터넷 익스플로러(IE) 시절에는 마이크로소프트의 독자 규격과 표준 규격이 달라, 동일한 DOM 조작 코드를 짜기 위해 브라우저 종류를 판별하는 수많은 분기 처리(Cross-Browsing) 헬게이트가 열렸었다. ↩