DOM이란 무엇인가?
DOM(Document Object Model)은 말 그대로 '문서 객체 모델'이라고 할 수 있다. 여기서 문서는 HTML, XML 문서를 뜻하며 이를 객체를 이용하여 접근하기 때문에 '문서 객체 모델'인 것이다. 이러한 DOM은 HTML이나 자바스크립트 등의 프로그래밍 언어와는 다른 독립적인 인터페이스라고 할 수 있다.
DOM을 사용하는 이유
우리는 자바스크립트를 처음 배울 때부터 이러한 표현을 자주 들어왔다.
자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입니다.
- MDN 'JavaScript가 뭔가요?'
그렇다면 자바스크립트는 어떻게 이러한 기능들을 웹페이지에 적용하는 것일까? 이런 경우 사용하는 접근방식이 바로 DOM이다. HTML 문서는 기본적으로 웹페이지의 시각적인 구조를 만들어 주지만 이러한 구조가 실제 동적으로 작동하려면 자바스크립트를 이용해 제어해야 한다. 이러한 제어를 위해선 HTML 문서의 특정 부분에 접근해야 하는데, DOM은 HTML 문서 전체를 객체로 인식하기 때문에 객체 내의 태그 등을 사용해서 필요한 요소에 접근한다.
DOM의 HTML 접근방식
DOM은 document 객체를 통해 HTML에 접근하며, 이는 window 객체를 이용하는 BOM(Browser Object Model)과의 차이점이다. 이러한 document 객체는 console.dir(document)를 이용해 직접 형태를 확인할 수 있다.
Node와 Element
DOM은 웹 문서를 부모-자식 관계를 가진 계층구조로 인식하며 이러한 구조는 노드와 가지로 이루어진 트리구조로 나타낼 수 있다. 이 트리구조의 <head>와 <body>등의 태그는 모두 Node라고 볼 수 있으며 심지어는 이미지나 객체화된 태그의 속성까지도 모두 Node로 표현된다. 이러한 Node 중에서 Element는 HTML 태그를 나타내는 Node라고 할 수 있으며 가장 많이 사용된다. 또한 Element node는 Attribute node나 Text node를 자식으로 가질 수 있다.
참고
MDN - DOM
