WEB - DOM(Document Object Model)?

728x90

서론

웹을 공부하다 보면 필연적으로 DOM이라는 말을 많이 듣게 됩니다.

프로그래밍 언어로 DOM을 접근하고 다루는 것이 필수적인 Web 개발자의 소양 중 하나입니다.

본문에서는 DOM에 대한 기본 지식을 알아보도록 하겠습니다.

Whis is DOM?

DOM(Document Object Model) 직역하자면 문서 객체 모델입니다.

HTML , XML로 작성한 문서를 어떠한 기준에 의해 구조화된 모델로 표현한 데이터를 DOM이라고 합니다.

이게 뭔 말이야?

HTML이나 XML은 문자들로 이루어진 문서입니다.

예를 들어 아래와 같은 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>Document</title>
</head>
<body>
    <h1>DOM이 뭔데요</h1>
</body>
</html>

HTML 형식의 문서입니다. 단순히 문자들로만 이루어져 있습니다.

웹 브라우저를 통해 웹페이지를 랜더링 하는 과정은 HTML형식으로 작성된 문자들을 읽고, 구조화된 DOM객체로 만드는 것이 가장 첫 번째 일입니다.

위의 HTML 문서가 어떻게 구조화된 DOM객체로 변경되는지 한번 보겠습니다.

그림처럼 단순히 문자들로만 구성된 HTML 문서는 위처럼 계속해서 이어지는 구조화된 트리의 형태로 만들어줍니다.

왜 DOM으로 만드는 것인가?

바로 구조화된 트리의 형태가 사용하기 쉽기 때문입니다.

문자들을 가지고 구조화된 트리의 형태로 관리하게 된다면, 다양한 프로그래밍 언어가 접근하고, 사용 및 변경이 아주 쉬워집니다.

트리 형태의 DOM에서 연결된 노드들을 탐색하며, 요소를 추가, 수정하거나 접근하는 등의 일을 할 수 있습니다.

DOM과 HTML의 차이점

DOM객체와 HTML의 차이점이 위의 내용만으로는 뭔가 애매합니다.

단순히 생각하면 둘 다 구조화되어있는 형태이기 때문입니다.

하지만 HTML 문서에서 DOM객체가 생성되고 DOM과 HTML은 엄밀히 차이가 존재하는 다른 녀석들입니다.

예를 들어 아래와 같은 HTML 문서가 있다고 가정합시다.

<html>
hello html
</html>

표준에 의해 작성된 HTML 문서는 아니지만, 분명히 HTML 문서입니다.

이 문서가 DOM으로 변경되면 어떻게 될까요?

DOM을 만드는 프로그램마다 약간의 차이가 있을 수 있지만, 가장 표준과 근접하게 DOM을 만드려고 노력합니다.

결과적으로 HTML 문서를 작성하는 방식이 차이가 있어도 DOM의 형태로 변환되면서 동일한 구조를 가지게 됩니다.

따라서, DOM을 이용하면 표준화된 제어가 가능하게 됩니다.

<html>
hello html
</html>
<html>
	<head>
    </head>
    <body>
		hello html
	</body>
</html>

예를 들자면 2개의 HTML 문서 다 DOM으로 변환되면서 hello html에 동일한 방법으로 접근할 수 있게 해 줍니다.

DOM의 정의에 대한 정리

여기까지의 내용을 정리해보면 조금 더 DOM을 쉽게 이해할 수 있습니다.

HTML은 문자로 구성된 문서
DOM은 구조화된 트리 형태의 데이터
구조화된 트리형태로서 모든 데이터들을 동일한 접근법을 제공해 줄 수 있다.

HTML을 DOM의 형태로 구조화한다.

HTML을 DOM의 형태로 표준화한다.

DOM API

이제 다양한 형태와 방법으로 생성된 html문서가 DOM으로 변환된다는 것을 알았습니다.

이제 생성된 DOM객체를 다룰 수 있는 프로그래밍 언어와 방법만 존재하면 어떤 html문서가 와도 DOM을 이용해서 제어할 수 있게 됩니다.

여러 프로그래밍 언어들에 API의 형태로 DOM객체를 다룰 수 있습니다.

그중 대부분의 웹 브라우저들은 Javascript라는 언어와 그 안에 DOM API를 제공하면서 DOM을 제어할 수 있는 서비스를 제공합니다.

DOM에 대한 이해를 했고, javascript와 DOM API를 배운다면 javascript를 통해 DOM을 다룰 수 있습니다.

다시 말해 정적인 web이 아닌, 동적인 web 즉 소스코드를 실행시켜서 다양한 서비스를 제공할 수 있게 됩니다.

728x90

'컴퓨터 > WEB' 카테고리의 다른 글

WEB - HTTP 프로토콜의 특징(Conectionless , Stateless) (0)	2022.03.14
WEB - HTTP란 ? (Hyper Text Transfer Protocol) (0)	2022.03.04
WEB - 서버에 요청하는 방법 ( GET 과 POST ) (0)	2022.02.24
WEB - 웹페이지의 생성 과정 (0)	2022.02.21
WEB - 웹과 표준 그리고 W3C (0)	2022.02.08