1️⃣ DOM
DOM에 대해서 ‘문서의 표현’ , ‘프로그래밍 인터페이스’ 등으로 설명한다. 이는 잘못된 설명이 아니지만 잘 와닿지 않는다.
아래의 사진과 함께 알아보자.
HTML은 쉽게 말해 문서로 되어 있는 ‘로봇의 설계도’라고 할 수 있다. 브라우저는 설계도를 기반으로 실제 로봇을 만드는 공장이고, 설계도를 기반으로 만들어진 로봇이 ‘DOM’이다.
즉, HTML이라는 문서를 기반으로 하여 실제로 표현되었기 때문에 DOM을 ‘문서의 표현’이라 한다.
이렇게 만들어진 로봇은 자바스크립트라는 언어를 통해서 조종할 수 있다.
여기서 API란 명령을 통해 특정 일을 할 수 있도록 하는 것으로, DOM은 자바스크립트로 명령을 내려 조종(=일)을 하게 함으로 ‘프로그래밍 인터페이스’라 할 수 있다.
2️⃣ 필요 이유
웹 페이지는 단순 HTML을 나타내기만하는 것이 아니다. 자바스크립트를 통해서 내용의 변경, 요소의 기능 부여 등의 명령 실행이 가능해야 한다.
HTML은 단순 텍스트이기 때문에 명령을 실행할 수가 없다. 그렇기 떄문에 명령을 실행할 수 있는 매개체가 필요하고 이 것이 ‘DOM’이다.
3️⃣ 구조
DOM은 트리 구조로 되어 있다. 최상단에 Document 객체가 존재하고 그 아래 HTML 노드에서 가지들이 시작한다.
HTML 문서에 작성된 태그, 그 태그의 속성, 그 안의 테스트가 모두 노드로 DOM안에 존재한다.
4️⃣. CSSOM
DOM은 HTML으로부터 만들어진 것을 의미하고, CSS로 부터 만들어진 DOM은 CSSOM이다.
CSS 파일, 내부 스타일 등 CSS 속성들이 트리 구조로 만들어 진다.
5️⃣. Render Tree
브라우저가 DOM과 CSSOM을 결합하여 만들어 낸것으로 DOM의 각 노드가 CSSOM에서 계산한 값들을 기반으로, 각 요소의 색상, 크기, 위치 등 시각적 요소들 포함하는 Render Object를 만들어 Render Tree에 붙게 된다. 단, 화면에 실제로 나오는 부분들이 나타나기 때문에 display:none의 경우 제외되고 표현된다.
즉, DOM에서 불필요한 부분을 가지치기를 하고 CSSSOM에서 잎을 가져다 붙여 완성된 것이라고 생각하면 쉽다.
우리가 보는 화면은 브라우저에서 Render Tree를 기반으로 레이아웃하여 만든 화면이다.
6️⃣. DOM과 CSSOM은 JavaScript의 구성요소인가 ?
DOM과 CSSOM은 JavaScript 작성된 정보와 기능을 사용하지만 WebAPI의 일부이다,
WebAPI는 브라우저에서 제공하기로 표준화된 기능이다. 즉 브라우저라면 마땅히 사용자가 자바스크립트를 통해 사용할 수 있어야하는 기능이다.
✅. 총정리
우리는 DOM과 CSSOM을 이용해서 웹에 변화를 줄 수 있다. 요소를 선택하고 텍스트 변경, 스타일 변경 등을 자바스크립트를 통해 DOM에 변화를 주어 화면 구성 요소를 변경 시키는 것이다.
단순한 HTML을 이용한 이미지에 그치지 않고 자바스크립트를 통해 조작될 수 있도록 하는 즉, 중간 다리 역할이 DOM이다.
‘ 얄팍한 코딩사전’ - DOM & CSSOM - 프론트엔드 개발자 필수지식’을 정리하였습니다.
