V VibeCoding 365
사전 목록 frontend

VIBECODING 365 / DICTIONARY

문서 객체 모델

Document Object Model (DOM)

기초 난이도: 기초태그: DOM · 브라우저 · JavaScript

DEFINITION

문서 객체 모델(DOM)은 마크업 문서를 프로그램이 읽고 바꿀 수 있게 하는 인터페이스다. WHATWG DOM Living Standard의 초록은 플랫폼에 치우치지 않은 모델로 이벤트, 작업 중단, 노드 트리를 정의한다고 적는다. 원래 뜻은 HTML과 XML 같은 문서에 접근하고 조작하는 API다. 이 표준에서 문서란 짧은 정적 페이지부터 멀티미디어가 섞인 긴 글, 상호작용 애플리케이션까지 마크업 기반 자원을 가리킨다. 각 문서는 노드 트리로 표현된다. 어떤 노드는 자식을 가질 수 있고, 어떤 노드는 항상 잎이다. 마크업이 들어가면 노드 트리가 나온다는 것이 표준의 한 줄 그림이다. 같은 표준 안에는 이벤트 대상과 작업 중단 신호도 들어 있어, DOM이라는 이름이 노드 트리만을 가리키는 것은 아니다.

마크업과 트리가 같지 않다

WHATWG 소개는 HTML 파싱 규칙 때문에 ASCII 공백이 모두 텍스트 노드가 되지는 않는다고 적는다. MDN도 브라우저가 HTML을 파싱하며 트리를 만들고 그걸로 화면을 그린다고 한다. 소스와 비슷해 보여도 공백 노드 등이 남아 완전히 동일하지는 않다. 노드는 요소만이 아니다. Node를 구현하는 객체는 Document, DocumentType, DocumentFragment, Element, CharacterData, Attr 같은 상속 인터페이스를 함께 구현한다. 실무에서 만나는 것은 대개 더 구체적인 객체다.

문서 트리와 섀도 트리

루트가 문서인 노드 트리를 문서 트리라고 한다. 문서 요소는 부모가 그 문서인 요소이며, 제약상 그런 요소는 하나뿐이다. 루트가 섀도 루트인 트리는 섀도 트리다. 섀도 루트는 항상 호스트를 통해 다른 트리에 붙으므로 혼자 있지 않다. 호스트가 속한 트리를 라이트 트리라고 부르기도 한다. 과거 표현인 in a document는 섀도 트리를 반영하지 못한 말이라 표준은 쓰지 말라고 한다. 프레임워크가 메모리에 두는 가상 트리는 이 표준의 문서 트리나 섀도 트리가 아니다. 가상 트리는 라이브러리 구현이고, 섀도 트리는 브라우저가 구현하는 DOM 표준의 일부다.

자바스크립트 언어가 아니다

웹에서 트리를 다루는 예는 거의 자바스크립트로 쓰이지만, MDN은 HTML·SVG·XML을 객체로 모델링하는 일이 자바스크립트 언어의 핵심이 아니라고 분명히 한다. DOM은 프로그래밍 언어가 아니라 웹 문서용 API다. Node.js 같은 런타임은 자바스크립트를 돌리되 DOM API를 핵심으로 제공하지 않을 수 있다. Node.js의 EventTarget은 계층과 전파가 없다는 점에서 브라우저 DOM의 EventTarget과 다르다. 표준은 특정 언어에 묶이지 않도록 설계되어, 같은 문서 구조 API를 다른 언어에서도 구현할 수 있다.

HTML이 얹는 인터페이스

코어 DOM이 문서와 노드를 기술하고, HTML 표준은 Document 인터페이스를 크게 확장한다. HTML 요소의 기본 인터페이스는 HTMLElement이며, 요소마다 전용 인터페이스가 더 붙는다. WHATWG DOM도 Element가 HTMLAnchorElement 같은 상속 인터페이스를 함께 구현한다고 적는다. 쿼리와 생성, 붙이기는 이 트리 API를 호출하는 일이다. 에이전트가 DOM을 조작한다는 말은 대개 브라우저가 만든 이 트리에서 노드를 찾거나 만들고 내용과 구조를 바꾼다는 뜻이다.

ENGLISH

Document Object Model (DOM)

EXAMPLE

document.querySelectorAll("p")로 문단을 찾고, createElement로 제목을 만들어 body에 appendChild한다.

REFERENCE

dom.spec.whatwg.org/