구축한 웹서버의 페이지를 동적으로 만들어주는 스크립트 언어인 javascript를 사용하는데요.
javascipt에 대해 검색을 하면 ‘DOM’ 이 빠지지 않습니다.
도대체 이 DOM은 무엇일까요?
DOM의 정의
MDN에서 말하는 DOM의 정의는 다음과 같습니다.
문서 객체 모델(The Document Object Model) 은 HTML, XML 문서의 프로그래밍 interface 이다.
…
프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들의 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM은 어떻게 생성되서 보여질까?
위의 정의에서 DOM은 원본 HTML 등의 문서의 객체 기반 표현 방식이라는 것을 알 수 있습니다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점입니다.
DOM은 트리형식의 자료구조를 가지고 있습니다. 트리구조는 root node에서 시작되어 아래로 퍼져 나가는 형태입니다.
node는 트리구조에서 root node를 포함한 모든 개개의 객체를 node라고 표현합니다. HTML문서를 예를 들면 head, body, title 등 모든 태그 뿐 아니라 태그안의 텍스트나 속성 등도 모두 node에 속합니다.
DOM == 문서(HTML)?
위의 설명을 읽다보면 DOM은 마치 문서와 1대 1매핑이 되는것 같습니다. 그러나 둘 간에는 몇가지 차이점이 있습니다.
1. DOM은 문서가 아닙니다.
DOM이 문서로부터 생성되지만 항상 동일하다고 할 수는 없습니다.
작성된 문서가 유효하지 않은 경우
<html>
Hello world!
</html>
위처럼 유효하지 않은 HTML이 있을때, 문서의 인터페이스인 DOM을 생성하는 동안 브라우저는 유효하지 않은 HTML코드를 올바르게 교정합니다.
따라서 생성된 DOM 트리에서는 Hello World가 올바르게 body 태그의 자식 노드로 생성된 것을 확인 할 수 있습니다.
자바스크립트에 의해 DOM이 수정된 경우
자바스크립트를 통해서 DOM에 새로운 노드를 추가하는 경우, 이는 DOM을 업데이트하지만, DOM을 생성한 문서 자체는 변경되지 않습니다.
2. DOM은 브라우저에서 보이지 않습니다.
브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합입니다. 이것은 오직 스크린에 그려지는 것으로 구성되어 있어서 DOM과 다릅니다. 렌더링 되는 요소만 가지고 있기 때문에 시각적으로 보이지 않는 요소들은 제외됩니다.
3. DOM은 개발도구에서 보이는 것이 아닙니다.
개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공하지만, DOM에 없는 추가적인 정보를 포함합니다.
예를들어 CSS의 ::before와 ::after 선택자를 사용해서 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성합니다. 이러한 가상요소는 DOM의 일부가 아니며, 자바스크립트에 의해 수정이 불가능합니다.
DOM과 자바스크립트
javascript를 검색하면 DOM이 빠지지 않는 이유는 자바스크립트로 작성된 문서와 문서의 요소에 접근하기 위해서 DOM이 사용되기 때문입니다.
DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다. 문서의 태그나 텍스트와 같은 모든 요소는 문서를 위한 DOM(document object model)의 한 부분입니다.
때문에 우리는 자바스크립트와 같은 스크립팅 언어를 통해 페이지 콘텐츠(the page content)에 접근하고 조작하여 동적인 웹 페이지를 구현할 수 있습니다.이것을 방정식으로 표현하면 다음과 같습니다.
API (web or XML page) = DOM + JS (scripting language)
DOM의 정의에 대해 알아보았습니다. 다음 포스팅에서는 DOM에 대해 더 깊이 알아보겠습니다.
참고
