DOM은 Document Object Model의 약자로 문서 개체 모델을 뜻하며, 문서의 요소들을 객체화하여 이 객체들을 프로그램 혹은 스크립트를 사용해 접근, 제어할 수 있도록 돕는 인터페이스입니다.
tree, node
브라우저는 HTML 문서 내 요소들을 나뭇가지가 뻗어가는 모양으로 구성하는데 이러한 모형을 tree구조🌳라고 하며, 이 때 각 요소들은 node, 뿌리가 되는 html 요소가 root node가 됩니다.
아래의 HTML 문서와 트리 구조를 살펴볼까요?
<html>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<header>
<h1>현재 페이지의 제목</h1>
</header>
<main>
<section>
<h2>섹션의 제목</h2>
<p>내용</p>
</section>
</main>
<footer>
<p>copyright</p>
<adddress>돔로 100 돔빌딩</address>
</footer>
</body>
</html>
object
여기서 html, body 등의 요소들의 타입을 확인해보면 다음과 같습니다.
/* 대충 html의 타입을 알려달라는 내용 */
typeof document.querySelector('html')
// 결괏값 'object'DOM에는 트리의 형태로 표현된 document의 요소들이 object타입으로 변환되어 저장되며 자바스크립트 등을 이용한 접근, 수정을 돕습니다.
정리
DOM의 역할을 정리해보면 다음과 같습니다.
브라우저는 HTML 문서를 트리의 형태로 표현하며, DOM은 문서 내 요소들을 객체 타입으로 변경하여 저장합니다. 이렇게 저장된 요소들은 자바스크립트를 통해 접근 및 수정이 가능합니다.
재미있는