DOM은 책 한 권이 나올 정도로 들여다 봐야 할 내용이 많다. 여기서는 핵심적인 개념을 이해할 수 있도록 정리해보도록 하겠다.
브라우저는 서버에서 받은 문서인 HTML, CSS를 파싱하고, 그 결과물인 DOM 트리와 CSSOM 트리를 융합해 사용자 장치에서 볼 수 있도록 변환한다.
좀 더 쉽게 설명하자면, HTML 개별 요소를 레고 부품이라고 할 수 있다. 그리고 설명서에 따라 (렌더링 엔진에 따라) 제작된 완성품(제작된 화면)이 바로 DOM인 것이다.
여기서 주의해야 할 것은 설명서대로 레고를 조립하고 부품을 추가로 가져다 붙일 수 있는 것처럼 DOM도 다 조립했다고 해서 조작할 수 없는 상태인 것이 아니라 추가로 생성, 수정, 삭제할 수 있다.
<aside> 💡 Virtual DOM이란? 위에서 비유한 것처럼 레고 완성품을 만들고 하나의 부품만 교체하기 위해서는 전체를 교체(리로딩)해야 하는 상황이 발생되었다. 이러한 문제를 해결하고자 SPA(Single Page Application)이 나왔고 원하는 부품만 교환할 수 있게 기능을 제공해준다. 여기서 사용되는 것이 Virtual DOM이다. 레고로 비유를 다시 하자면 실제 조립(DOM)을 하지 않고 가상으로 조립(Virtual DOM)을 해놓고 바뀌는 부품이 있다면 바꿔놓고 조립을 하는 것이다.
</aside>
DOM 트리는 HTML을, CSSOM 트리는 CSS 를 조작하는 API(Application Programming Interface)이다. 이 챕터에서는 문서객체모델을 의미하는 DOM(Document Object Model)에 집중하자.
<aside> 💡 Parsing(파싱)이란? 일련의 문자열을 의미있는 token으로 분해하고 이들로 이루어진 parse tree를 만드는 과정을 말한다. 브라우저가 코드를 이해하고 사용할 수 있도록 해주기 위함이다.
</aside>
DOM은 HTML, XML 문서의 프로그래밍 인터페이스(API)이다. 즉, DOM은 웹 페이지를 프로그래밍 언어로 조작할 수 있도록 연결시켜주는 역할을 한다. DOM은 Document를 object들로 표현하는데, 그 이유는 웹 페이지를 생성하거나 수정하는데 사용되는 모든 property, method, event 들이 object이기 때문이다.
DOM은 JavaScript에 종속되어 있는 개념이 아니다. API 형태로 제공되기 때문에 Python으로도 조작할 수 있다.
DOM은 HTML 코드를 해석해서 트리 형태로 정보를 표현하는 문서를 생성한다. 브라우저는 DOM을 통해 화면에 웹 컨텐츠를 렌더링하며, 이를 제어하는 property와 method를 제공한다. 이를 통해 문서 구조, 내용, 스타일 등을 변경할 수 있다.
HTML 문서는 HTML 요소들의 집합으로 이루어져 있고 요소들은 서로 중첩 관계를 가질 수 있다. 이러한 중첩 관계로 인해 계층적인 부모-자식 관계가 형성된다. 이처럼 부모 노드와 자식 노드를 이용해 노드 간 계층 구조를 표현하는 비선형 자료구조를 트리 자료구조라 한다.
<aside> 💡 비선형(Non-linear) 자료구조란?
</aside>
알잘딱깔센 JavaScript
알잘딱깔센 JavaScript
실제로 어떠한 구조를 가지는지 code를 통해 살펴보자. HTML 구조는 아래와 같다. 책을 보고 실습할 경우 따로 파일을 만들지 않고 브라우저에서 수정하면서 실습하면 된다.
