오늘의 주제는 DOM(Document Object Model)이다. 우리가 작성한 코드가 어떻게 화면에 나오게 되는지 간단한 코드 예시를 보며 확인해 보고자 한다.
화면 표시 과정과 DOM의 정의
우리가 작성한 HTML/CSS 파일은 바로 웹페이지 상에 표시되지 않는다. 브라우저는 이 파일을 가지고 아래와 같은 과정을 진행하고 이를 화면에 표시하게 된다.
우리가 작성한 파일은 브라우저가 이해할 수 있도록 HTML은 DOM, CSS는 CSSOM으로 트리 구조 형식의 객체로 변환된다. 그 후 이 둘을 조합하여 Render Tree(DOM+CSSOM)를 형성하는데, 여기서 실제 화면에 표시되는 요소들만 가져오게 되고, 레이아웃을 계산한 뒤 우리가 보는 웹페이지 화면에 표시되게 됩니다.
DOM은 웹 브라우저가 HTML 문서를 트리 구조의 객체로 표현한 모델이고, 이 객체들을 자바스크립트로 읽고 수정할 수 있다.
코드로 보는 DOM Tree 예시
마지막으로 HTML 문서를 자바스크립트로 어떻게 다룰 수 있는지 간단한 코드와 DOM의 구조 그림을 통해 알아 보겠다. 아래는 버튼을 누르면 카운트가 1 증가하는 기능을 작성한 HTML 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>DOM + JavaScript 예제</title>
</head>
<body>
<h1>카운터 예제</h1>
<!-- 숫자를 보여줄 부분 -->
<p>
현재 카운트: <span id="count">0</span>
</p>
<!-- 버튼 -->
<button id="btn">+1 증가</button>
<!-- JavaScript 코드 -->
<script>
// 1. DOM에서 필요한 요소를 찾기
const countSpan = document.getElementById("count");
const button = document.getElementById("btn");
// 2. 현재 카운트 값을 저장할 변수
let count = 0;
// 3. 버튼 클릭 이벤트 달기
button.addEventListener("click", () => {
// count 값 증가
count = count + 1;
// 화면(span 태그)의 글자 변경
countSpan.textContent = count;
});
</script>
</body>
</html>
구조를 도식화 해보면 다음과 같다.
우리가 작성한 HTML 파일은 브라우저가 읽기 전에는 문서 형태의 코드이다. 브라우저는 이 HTML을 파싱하여 DOM 트리라는 객체 구조로 변환한다. 자바스크립트에서는 `document` 객체를 통해 DOM에 접근할 수 있다.
위 코드에서 일어나는 일을 정리해 보면 다음과 같다.
1. 브라우저가 HTML을 파싱해서 DOM 트리를 만든다.
2. 자바스크립트 코드에서 document.getElementById("count")를 호출하면 DOM 트리 안에 있는
<span id="count"> 노드를 가리키는 객체를 돌려준다.
3. countSpan.textContent = count처럼 속성을 바꾸면 해당 DOM 노드의 내용이 변경되고, 브라우저는 변경된 내용을 반영하기 위해 필요한 부분을 다시 계산하고 화면을 갱신한다.
4. addEventListener("click",...)을 통해 "사용자가 버튼을 클릭했을 때 DOM을 이렇게 바꿔라"라는 동작을 연결할 수 있다.
HTML은 화면의 뼈대(구조)를 정의하고, 자바스크립트는 DOM 객체를 직접 조작해서 화면을 "살아 움직이게" 만든다고 볼 수 있다.