DOM이란?(feat.CSSOM)

dom... 분노의 질주 애청자인 나에게 dom은 친숙한 이름입니다. 

도미닉 토레토, 이번에 시리즈 마지막 편을 극장에서 보고 참.... 시원섭섭한 기분을 많이 느꼈습니다... ㅠㅠ 

왠지 그래도 나중에 또 번외 시리즈가 나올것같긴 하지만요 ㅎㅎ

 

DOM... 객체.... 이런 단어들이 웹을 입문하는 저에겐 항상 어려웠던 단어였습니다. 

아직 익숙하지 않아서, 많이 접해보지 않아서 일 수도 있지만 여전히... 조금 헷갈리는 개념입니다.

그래서 이번에 DOM과 DOM트리, 객체에 대해서 조금 저 자신이 이해하기 쉽게 정리를 해보겠습니다.

정리를 하는김에 NODE와 객체라는 개념을 먼저 짚고 넘어 가보겠습니다.

 

객체(Object)

간단히 풀어서 말씀드리면,

붕어빵, 고양이, 강아지, 핸드폰, 이어폰, 물, 이 모두가 객체입니다.

 

물리적으로 존재하거나 추상적으로 생각 할 수 있는 것들 중에 자신의 속성을 가지고 있고

다른 것들과 구분이 될 수 있는 것.

 

다시 프로그램적으로 말씀을 드리면

어떠한 속성값과 행동을 가지고 있는 데이터라고 할 수 있습니다.

 

ex> 붕어빵

let 붕어빵 ={
  내용물 = "팥",
  맛 = "맛있다"
    }

이렇게 속성이 있고 다시,

 

이 속성은

내용물 -> 'key'(키)

팥 -> 'value'(벨류)

라고 부릅니다. 

 

이렇게, 속성이 있고, 다른 데이터와 구분이 되는 것이 객체입니다.

 

 

노드(Node)

노드

 

노드란

 

어떤 정보를 계층적 구조로 보여주기 위한 자료형 식이 Node입니다.

위에 표에 보이는 것이 노드트리이고, 각각의 네모 박스로 된것도 노드, 박스안의 내용은 텍스트노드 이런 형식으로 구조화 되어 있습니다.

 

그래서

 

HTML 문서의 정보를 각각의 속성마다 Node 단위로 정리해, 

DOM 트리를 통해 Node 간의 계층적 관계를 보여줍니다.

 

노드 트리는 최상위 레벨인 루트 노드로 시작해서, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려갑니다.

 

노드의 종류 

문서 노드(document node)	HTML 문서 전체를 나타내는 노드임.
요소 노드(element node)	모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임.
속성 노드(attribute node)	모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음.
텍스트 노드(text node)	HTML 문서의 모든 텍스트는 텍스트 노드임.
주석 노드(comment node)	HTML 문서의 모든 주석은 주석 노드임.

 

출처:

http://tcpschool.com/javascript/js_dom_node

 

다시 돌아와서 이제 DOM이 무엇인지 알아보겠습니다.

 

DOM(Document Object Model)

 

말 그대로 문서 객체 모델 이라고 생각하시면 됩니다.

MDN 문서에 따르면 DOM이란

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

 

문서를 파싱해서 나온 파싱트리를 계층적 구조(즉 노드트리)형식으로 DOM을 만든다.

즉, 우리가 짠 HTML 코드를 Javascript언어가 쉽게 다가갈수 있도록 재구성한 객체 라고 생각하면 됩니다.

 

MDN의 설명을 보면 Interface라고 말하는 부분을 초점을 두면 좋을 것 같습니다.

 

Interface란 

사물과 사물 또는 사물과 인간의 의사소통이 가능 하도록 해주는 목적으로 만든 매개체 입니다.

 

즉 DOM을 사용하는 이유는, DOM을 통해서 HTML을 제어하고, CSSOM과 함께 렌더트리를 만들기 위해서 일 것 같습니다.(이부분은 제 주관적인 생각입니다.)

 

여기서 이런 궁금증이 생깁니다.

HTML이랑 DOM이랑 정확히 차이가 무엇인가??

 

HTML은 브라우저에 보일 문서의 구조나 모양을 단순하게 텍스트로 구성이 되어 있다면, 

DOM은 이 문서의 구조와 텍스트를 객체화 시켜서 만들어진 인터페이스, 추가로

다른 프로그램에서 접근 할 수 있도록 만들어 진 것. 

 

이라고 생각 하시면 됩니다. 

 

아직, 추가 할 사항이 많지만 조금 더 제 자신이 공부를 해서 쓸 수 있을때 추가로 수정을 해 놓겠습니다~!

 

 

 

CSSOM이란?

 

앞에서 DOM에 대한 설명을 잠깐 드렸는데요,

CSSOM, CSS의 DOM이라고 이해 하시면 될 것 같습니다. 

 

브라우저가 DOM을 생성하는 동안, HEAD섹션에서 스타일 시트를 가지고 와서

파싱을 하고 CSSOM으로 만들게 됩니다

 

즉, CSS의 형식을 DOM객체의 형태로 변환 시킨 인터페이스가 CSSOM 입니다.

즉 브라우저가 이해할 수 있는 형식으로 전환이 된겁니다. 

 

그리고 이렇게 완성된

DOM과 CSSOM을 결합 하여 Render Tree를 만들게 됩니다.