DOM(Document Object Model)
텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.
OM은 다음 두 가지 기능을 담당한다.
- HTML 문서에 대한 모델 구성
브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다. - HTML 문서 내의 각 요소에 접근, 수정
DOM은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드를 제공한다. DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용 또한 변경된다.
DOM TREE
DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라 부른다.
DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다. 요소의 중첩관계는 객체의 트리로 구조화하여 부자관계를 표현한다. DOM tree의 진입점(Entry point)는 document 객체이며 최종점은 요소의 텍스트를 나타내는 객체이다.
- 문서 노드(Document Node)
트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다. - 요소 노드(Element Node)
요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다. (그림: DOM tree의 객체 구성 참고) - 어트리뷰트 노드(Attribute Node)
어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다. - 텍스트 노드(Text Node)
텍스트 노드는 HTML 요소의 텍스트를 표현한다. 텍스트 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 즉, 텍스트 노드는 DOM tree의 최종단이다.
DOM과 HTML의 차이
DOM은 원본 HTML 문서의 객체 기본 표현 방식이다. 브라우저 뷰포트에 보이는 것은 렌더트리로 DOM과 CSSOM의 조합이다. 렌더트리는 오직 스크린에 그려지는 것으로 구성되어 있어 DOM과는 다른 것이다.
즉, 렌더링되는 요소만이 관련 있기 때문에 시각적으로 보이지 않는 요소는 제외된다.
display:none 스타일 속성을 가지고 있는 요소를 예를 들자면, DOM은 해당 요소를 포함시키지만 렌더 트리에 해당하는 뷰 포트에 표시되는 내용은 해당 요소를 포함하지 않는다.
개발도구의 요소 검사기는 DOM과 가장 가까운 근사치를 제공한다. 그러나 개발도구의 요소 검사기는 DOM에 없는 추가적인 정보를 포함한다. 예를 들어 CSS의 가상 요소인 ::before, ::after 선택자이다. 해당 선택자로 생성된 가상 요소는 CSSOM과 렌더 트리의 일부를 구성하지만, 기술적으로 DOM의 일부는 아니다.
DOM은 오직 원본 HTML 문서로부터 빌드 되고, 요소에 적용되는 스타일을 포함하지 않기 때문이다.
그렇기 때문에 DOM의 일부가 아닌 가상 요소는 자바스크립트를 사용해 수정할 수 없다.
DOM은 HTML 문서에 대한 인터페이스이다. 뷰포트에 무엇을 렌더링 할지 결정하기 위해 사용되며, 페이지의 콘텐츠 및 구조 그리고 스타일이 자바스크립트 프로그램으로 수정하기 위해 사용된더. DOM과 원본 HTML문서 형태와 비슷하지만 아래와 같은 몇가지 차이점이 있다.
- 항상 유효한 HTML 형식
- 자바스크립트에 수정될 수 있는 동적 모델
- 가상 요소를 포함하지 않는다
- 보이지 않는 요소를 포함한다
서버리스란?
서버리스란, 서버가 없다는 것이 아니라 서버를 직접 관리할 필요가 없는 모델을 의미한다.
서버를 처음부터 구축하는 것은 어려운 일이다. 따라서 서버를 대신 만들어 놓고 데이터 생성, 조회, 삭제 및 수정 등의 기능을 대신 제공해주는 서비스들이 존재하는데 이를 서버리스라고 하는 것이다.
즉, 서버를 하나부터 열까지 만들 필요 없이 서버 기능을 제공하는 서비스를 이용해 필요한 기능을 구현할 수 있도록 하는 것이다.
DOM... DOM은 프로그래밍 하면서 자주 접하고 듣는 단어이지만, 이게 뭘까 하고 검색해볼때마다 그래서 뭐지..? 라는 결론으로 끝났던 개념이다. 지금도 사실 그래서 DOM이라는게 구체적으로 무엇인지를 아직 정확히는 모르겠다.. 근데 지금까지 나는 DOM이라는게 HTML의 트리 구조를 뜻하는 줄로 막연하게 알고 있었는데, HTML과 DOM은 또 엄연히 다른 것이라니 아직도 공부가 많이 필요하는걸 느꼈다.
