[CS] DOM이란 무엇인가?

쭈리·2023년 12월 13일

CS DOM

CS

목록 보기

2/3

🤔 DOM 캡처 구현? DOM이 뭔데?

🔗 이전 글 : html2canvas를 사용하여 DOM 캡처 구현하기

프론트엔드 개발을 하다보면 반드시 DOM을 사용해서 기능을 구현하는 경험을 할 수 있다. 그렇다면 DOM은 무엇이고 왜 사용하는지 알아보자.

📚 오늘의 주제 : DOM (문서 객체 모델)

그 전에 웹 브라우저에는 내장된 API들이 있다.
Browser APIs는 웹 브라우저가 현재 컴퓨터 환경에 대한 데이터를 제공하거나, 오디오를 재생하는 등 여러 유용하고 복잡한 일을 수행할 수 있도록 한다. 우리는 Javascript로 Browser APIs를 사용할 수 있는데 ~~( Javascript만이 할 수 있는 것은 아니지만 현재는 브라우저가 JS를 지원하기 때문 )~~ , 그 종류로는 DOM, WebGL, Geolocation API 등이 있다.

DOM (Document Object Model)

문서 객체 모델(DOM)은 HTML이나 XML 문서를 구조화 시킨 표현을 제공하고 구조화한 문서의 각 요소를 개체로 취급하며, 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.

즉, JS같은 스크립팅 언어가 쉽게 웹 페이지를 읽고 조작할 수 있도록 도와주는 역할이다.

😎 DOM은 어떻게 생겼을까?

DOM은 DOM Tree라고 하는데, 문서를 계층적 구조와 정보로 표현하고 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리구조로 이루어져 있기 때문이다.

DOM에서 HTML 요소, 속성, 텍스트 등 모든 것은 노드이다. DOM은 문서를 논리 트리로 표현한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>velog</title>
</head>
<body>
  <h1>DOM이란?</h1>
  <a href="">Link</a>
</body>

위 코드를 논리 트리로 구성하면 아래와 같다.

이렇게 계층적인 구조로 node가 구조화 된다는 것을 알 수 있다. 노드 타입은 총 12가지가 있고, 그 중 중요한 노드는 document node , element node , text node , attribute node 이다.

🚶‍♂️ DOM의 정적 생성과 동적 생성 💃

자바스크립트를 이용하면 HTML 문서에 없는 노드를 만들고 페이지에 렌더링 되도록 하는 동적 구현이 가능하다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>velog</title>
</head>
<body>
  <h1>DOM이란?</h1>
</body>

이 코드와

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>velog</title>
</head>
<body>
  <h1 class="h1-title">DOM이란?</h1>
  <script src="test.js"/>
</body>