웹 페이지를 열었을 때, 우리가 보는 모든 요소들(텍스트, 이미지, 버튼 등 ..)은 생각보다 단순하지 않다. 이 모든 것들은 브라우저가 이해할 수 있는 형태로 변환된 데이터 구조, 즉 DOM으로 만들어진다. 개발 공부를 한다면 꽤나 들어보았을 단어이다. 이 DOM이란 과연 무엇일까 ?
1. DOM
DOM
: Document Object Model (문서 객체 모델)
이전 포스트(브라우저의 렌더링 과정)에서도 설명했듯이 브라우저는 HTML 문서를 먼저 로드한다. 이때 브라우저가 이해하고 조작하기 용이하도록 해당 HTML 문서를 객체로 구조화하는데 이때 구조화된 문서의 객체 모델이 DOM 인 것이다. 그리고 해당 문서에 대한 모델을 트리 형식으로 메모리에 생성하게 되는데 이것을 DOM tree 라고 한다.
이렇게 DOM은 부모-자식 관계를 갖는 정적인 트리 구조로 표현된다. 그리고 JS를 통해 DOM을 동적으로 조작(수정, 추가, 삭제 등)하여 웹 페이지의 내용을 바꿀 수 있다.
자바스크립트가 할 수 있는 DOM 조작 내용
- 새로운 HTML 요소, 속성 등 추가
- 존재하는 HTML 요소, 속성 등 변경하거나 제거
- HTML 문서의 모든 CSS 스타일을 변경
- HTML 문서에 새로운 HTML 이벤트 추가
- HTML 문서의 모든 HTML 이벤트에 반응
2. DOM 계층 구조
1️⃣ 문서 노드 (Document Node)
트리의 최상위에 존재하며, 돔 트리에 접근하기 위한 시작점(entry point)
2️⃣ 요소 노드 (Element Node)
<> ~ </> 꺽쇠 한쌍이 곧 노드 객체 한 개
HTML 엘리먼트 표현, 속성이나 텍스트 노드에 접근하기 전에 요소 노드 먼저 찾아 접근해야 함
const a = document.getElementById('myText');
// id 속성 값을 통하여 id="myText"인 요소 노드를 한 개 선택
<p id="myText">안녕!</p>
// a는 id 속성을 이용해 p태그(요소 하나)를 가리킴
3️⃣ 어트리뷰트 노드 (Attribute Node)
HTML 요소의 속성을 표현
해당 요소 노드를 찾아 접근하면 속성을 참조, 수정할 수 있음
document.querySelector('h1').id = 'heading';
// id 어트리뷰트의 값을 변경4️⃣ 텍스트 노드 (Text Node)
HTML 요소의 텍스트를 표현
요소 노드의 자식이며 자신의 자식 노드를 가질 수 없음, 돔 트리의 최하단
.
.
.
위 계층 구조 이미지를 HTML 문서로 표현해보면 아래와 같다.
(참고로 위 이미지는 모든 요소 노드를 포함하고 있지 않으며 이해를 위해 임의적으로 그린 것이기 때문에, 아래 HTML 문서와 차이가 있다. 아래의 HTML 문서가 실제를 바탕으로 그려지는 DOM은 이미지와 달리 더 다양한 요소로 구성된다.)
<!DOCTYPE html>
<html>
<head>
<title>Document Structure</title>
</head>
<body>
<h1 attribute="value">텍스트 노드</h1>
<ul>
<li>텍스트 노드</li>
</ul>
<ul>
<li>텍스트 노드</li>
<li attribute="value">텍스트 노드</li>
</ul>
</body>
</html>
3. 참고 !
❓ CSSOM(CSS Object Model)이란?
HTML document를 트리 구조로 만든 것이 DOM이라면, CSSOM은 CSS를 트리 구조로 만든 것이다. CSS 규칙들을 파싱해서 브라우저가 스타일을 계산할 수 있도록 하며, DOM과 함께 Render Tree를 구성한다. (발음은 "씨에스오엠" 이라고 읽는다.)
즉, DOM과 함께 생성되는 css 기반 트리 구조 모델이고 'DOM + CSSOM → Render tree 생성'이라고 보면 된다.
