사용한 요소를 함께 공유해 드립니다.
DOM이란 “Document Object Model”의 약자로서 **“문서 객체 모델”**이라고 불리는 HTML, XML 문서의 프로그래밍 인터페이스를 가리키는 말입니다. 이렇게 얘기해서는 잘 와닿지 않으실 겁니다. 이해를 돕기 위해 좀 더 비유적으로 그 의미를 알아봅시다.
우리가 로봇을 만들고 작동시키고 싶다고 가정해봅시다. 가장 먼저 로봇을 만들려면, 우리는 설계도를 작성해야 합니다. 설계도에 따라서 로봇의 모델이 생성되고, 완성된 로봇의 모델은 리모컨을 통해 제어될 수 있습니다. 이러한 과정 등을 이용해 로봇이 최종 완성되면 로봇을 출시합니다.
이때 우리가 작성하게 되는 설계도가 HTML이고, 설계도의 주문사항을 충족하여 만든 로봇 모델이 DOM입니다. 우리는 자바스크립트라는 리모컨으로 DOM이라는 모델의 구성 요소를 제어할 수 있습니다. 그리고 최종 출시된 로봇은 웹브라우저에 보이는 웹사이트입니다.
그래서 DOM이란 개발자들이 작성한 문서를 웹 페이지로 렌더링하는 과정에서 생성되는 모델입니다. 개발자들은 프로그래밍 언어를 통해서 DOM 모델의 구성 요소를 조작할 수 있습니다.
DOM은 왜 탄생하게 되었을까요? 처음에 DOM은 문서를 구조화하여 표현하기 위해 만들어졌고 그후 W3C와 WHATWG이라는 두 단체에 의해 DOM 표준이 정립되었습니다. 이러한 DOM은 현재 세 번의 최신화 과정을 거쳐 DOM Level 4가 표준화된 상태입니다.
과거의 DOM Level 1~3[1]표준 문서는 W3C 홈페이지에서, 현재 표준으로 지정된 DOM Level 4[2]는 WHATWG 홈페이지에서 볼 수 있습니다. 최신화 과정을 거치면서 DOM은 단순히 문서를 구조화하는 것에서 발전되어 현재는 HTML 및 XML 문서에 쉽게 접근하기 위한 용도로 확장된 상태입니다. 이렇게 발전된 DOM을 우리는 웹을 동적으로 구현할 때 효과적으로 사용할 수 있습니다.
DOM을 이용한 문서 접근
아마 독자분들은 다시 “대체 문서는 뭐고, 객체는 또 뭔가요?”라고 생각하시는 분들이 많으실 겁니다. 이러한 DOM의 의미와 구조에 대해서 잘 알기 위해서는 필수적으로 웹 브라우저의 렌더링 과정에 대해 알아볼 필요가 있습니다. 여기서 렌더링이란 웹 브라우저(크롬, 파이어폭스, 익스플로러 등)가 가지고 있는 엔진으로 개발자가 작성한 HTML, CSS, JavaScript 문서 등을 화면에 출력하는 과정을 의미합니다. 이러한 렌더링 과정 중 하나로 DOM은 HTML 문서를 파싱해서 JavaScript와 같은 프로그래밍 언어와 상호작용합니다. 파싱(Parsing)이란 구문 분석 과정[3]으로, 쉽게 말하자면 브라우저가 문서를 분해하여 해석하는 과정입니다.
브라우저의 파싱 관계