What, exactly, is the DOM?과 해당 원문의 번역본을 학습한 후 정리한 글입니다.
웹 페이지가 만들어지는 방법
원본 HTML 문서를 읽어들인 후, 스타일을 입혀 뷰 포트에 표시하는 과정을 Critical Rendering Path라고 한다.
이 과정은 크게 두 단계로 나뉘어 진다. 첫 번째로 읽어들인 문자를 파싱하여 어떤 내용을 렌더링할지 결정하며, 두 번째로 브라우저에서 렌더링을 수행한다. 첫 번째 단계를 통해 렌더 트리가 생성되는데, 이는 HTML 요소(DOM)와 관련 스타일 요소(CSSOM)로 구성된다.
DOM이란
DOM(Document Object Model)은 웹 페이지에 대한 인터페이스로, HTML 문서의 구조와 내용을 다양한 프로그램에서 사용할 수 있게 한 객체 기반 표현이다. DOM의 객체 구조는 '노드 트리'로 표현된다. 이전의 알고리즘 학습 간 배웠듯 노드는 상속 관계를 맺고 있는데, 부토 줄기인 <html>요소부터 시작하여 하위 요소로 가지와 잎을 내린다.
<!doctype html>
<html lang="en">
<head>
<title>My first web page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>How are you?</p>
</body>
</html>위의 HTML 문서를 아래의 노드 트리 형태로 나타낼 수 있다.
- HTML (Root)
- <head>
- <title>
- My first web page
- <title>
- <body>
- <h1>
- Hello, world!
- <p>
- How are you?
- <h1>
- <head>
유의할 점
1. DOM은 HTML 문서에서 만들어지지만, 항상 두 요소가 일치하는 것은 아니다. 첫째로 HTML 문서에 유효한 <head>, <body> 등의 요구 사항이 보이지 않을 때이다. DOM 트리를 통해 수정 여부를 확인할 수 있다. 둘째로 자바스크립트를 이용해 DOM에 직접 추가 노드를 만드는 경우이다. 이 경우 DOM은 업데이트되지만, HTML문서는 업데이트되지 않는다.
2. 개발자 도구의 Elements는 DOM이 아니다. 예를 들어 Elements 탱베서 확인할 수 있는 CSS의 가상 요소인 ::before과 ::after 선택자를 통해 생성된 요소는 CSSOM 요소지만, DOM에는 포함되지 않는다. 따라서 가상 요소는 자바스크립트에 의해 수정될 수도 없다.
정리하자면, DOM은 브라우저 렌더링 과정에서 생성되는 HTML 요소로 노드 객체 형태를 가진다. 또한 자바스크립트 내 페이지의 컨텐츠와 구조, 스타일을 수정하는 데에 사용한다.
