📝
DOM - 잡았다, 요 돔!/
📝
Chapter 1. 개요
📝

Chapter 1. 개요

1. DOM이란 무엇일까요?1.1. DOM의 정의1.2. DOM의 탄생배경2. 렌더링 과정에서의 DOM2.1. 렌더링의 의미2.2. HTML 요소와 DOM의 상관관계 3. HTML을 조작할 수 있게 하는 API3.1. DOM을 통한 HTML 요소 접근 및 조작 3.2. 요소 접근 및 조작 예시 Reference

1. DOM이란 무엇일까요?

1.1. DOM의 정의

DOM이란 “Document Object Model”의 약자로서 “문서 객체 모델”이라고 불리는 HTML, XML 문서의 프로그래밍 인터페이스를 가리키는 말입니다. 이렇게 얘기해서는 잘 와닿지 않으실 겁니다. 이해를 돕기 위해 좀 더 비유적으로 그 의미를 알아봅시다.
우리가 로봇을 만들고 작동시키고 싶다고 가정해봅시다. 가장 먼저 로봇을 만들려면, 우리는 설계도를 작성해야 합니다. 설계도에 따라서 로봇의 모델이 생성되고, 완성된 로봇의 모델은 리모컨을 통해 제어될 수 있습니다. 이러한 과정 등을 이용해 로봇이 최종 완성되면 로봇을 출시합니다.
이때 우리가 작성하게 되는 설계도가 HTML이고, 설계도의 주문사항을 충족하여 만든 로봇 모델이 DOM입니다. 우리는 자바스크립트라는 리모컨으로 DOM이라는 모델의 구성 요소를 제어할 수 있습니다. 그리고 최종 출시된 로봇은 웹브라우저에 보이는 웹사이트입니다.
그래서 DOM이란 개발자들이 작성한 문서를 웹 페이지로 렌더링하는 과정에서 생성되는 모델입니다. 개발자들은 프로그래밍 언어를 통해서 DOM 모델의 구성 요소를 조작할 수 있습니다.
 

1.2. DOM의 탄생배경

DOM은 왜 탄생하게 되었을까요? 처음에 DOM은 문서를 구조화하여 표현하기 위해 만들어졌고 그후 W3C와 WHATWG이라는 두 단체에 의해 DOM 표준이 정립되었습니다. 이러한 DOM은 현재 세 번의 최신화 과정을 거쳐 DOM Level 4가 표준화된 상태입니다.
과거의 DOM Level 1~3[1]표준 문서는 W3C 홈페이지에서, 현재 표준으로 지정된 DOM Level 4[2]는 WHATWG 홈페이지에서 볼 수 있습니다. 최신화 과정을 거치면서 DOM은 단순히 문서를 구조화하는 것에서 발전되어 현재는 HTML 및 XML 문서에 쉽게 접근하기 위한 용도로 확장된 상태입니다. 이렇게 발전된 DOM을 우리는 웹을 동적으로 구현할 때 효과적으로 사용할 수 있습니다.
 
DOM을 이용한 문서 접근DOM을 이용한 문서 접근
DOM을 이용한 문서 접근
 

2. 렌더링 과정에서의 DOM

2.1. 렌더링의 의미

아마 독자분들은 다시 “대체 문서는 뭐고, 객체는 또 뭔가요?”라고 생각하시는 분들이 많으실 겁니다. 이러한 DOM의 의미와 구조에 대해서 잘 알기 위해서는 필수적으로 웹 브라우저의 렌더링 과정에 대해 알아볼 필요가 있습니다. 여기서 렌더링이란 웹 브라우저(크롬, 파이어폭스, 익스플로러 등)가 가지고 있는 엔진으로 개발자가 작성한 HTML, CSS, JavaScript 문서 등을 화면에 출력하는 과정을 의미합니다. 이러한 렌더링 과정 중 하나로 DOM은 HTML 문서를 파싱해서 JavaScript와 같은 프로그래밍 언어와 상호작용합니다. 파싱(Parsing)이란 구문 분석 과정[3]으로, 쉽게 말하자면 브라우저가 문서를 분해하여 해석하는 과정입니다.
 
브라우저의 파싱 관계브라우저의 파싱 관계
브라우저의 파싱 관계

2.2. HTML 요소와 DOM의 상관관계

우선 HTML 요소가 무엇인지부터 알아봅시다. HTML을 구성하는 개별적인 요소는 HTML 요소(HTML element)입니다. HTML 요소의 구조는 다음과 같습니다.
HTML 요소의 구성 HTML 요소의 구성
HTML 요소의 구성
위 그림을 보면 HTML 요소 내 콘텐츠는 “안녕” 텍스트 하나인 것을 알 수 있습니다. 하지만 텍스트 외에도, HTML 콘텐츠 내 다른 HTML 요소가 중첩될 수 있습니다. 즉, HTML 요소 간에 계층적인 부자 관계가 형성될 수 있습니다.
 
<html>
	<head>
		<title>제목</title>
		<link></link>
	</head>
  <body>
		<div id="hello">
			<p>안녕</p>
		</div>
	</body>
</html>
HTML 요소 간 중첩 관계
 
‘HTML 요소의 구성’ 그림에서는 div 요소의 콘텐츠 안에 ‘안녕’이라는 텍스트만 있었지만 'HTML 요소 간 중첩 관계’ 그림에서는 div 요소에 p 태그가 추가되면서 div와 p 요소 간의 부모-자식 관계가 형성되었습니다.
DOM DOM
DOM
그래서 DOM은 이런 HTML 요소 간 관계를 반영해서 HTML 문서를 노드 객체 모델로 구성합니다. 위의 DOM 그림은 ‘HTML 요소 간 중첩 관계 코드’를 기반으로 브라우저가 생성한 DOM의 구조입니다. 마치 트리와 같은 형태인 것을 확인할 수 있습니다. 그림 내 각 상자들은 노드 객체라고 불립니다. DOM 그림을 살펴보면 Document 객체는 문서 노드이며 html head body title link div는 요소 노드입니다. 그리고 id=“hello”는 어트리뷰트 노드, “제목”과 “안녕”은 텍스트 노드입니다. 각 노드는 객체이기 때문에 고유의 프로퍼티 및 메서드를 가지고 있습니다. 이에 관해서는 추후 더 자세히 알아보겠습니다.
 

3. HTML을 조작할 수 있게 하는 API

3.1. DOM을 통한 HTML 요소 접근 및 조작

비로소 우리는 프로그래밍 언어를 사용하여 DOM에 접근할 수 있게 되었고 나아가 DOM을 통해 문서의 구조나 스타일, 내용 등을 변경할 수 있게 됩니다. 이러한 일련의 과정을 통해 우리는 역동적인 웹 페이지를 마주할 수 있게 됩니다.
위에서 각 노드 객체에는 고유의 프로퍼티와 메서드가 있다고 했습니다. 이번에는 각 노드 객체의 프로퍼티와 메서드를 이용해 노드 객체를 조작하는 방법을 알아보겠습니다.
노드 객체의 내용을 조작 할 때, 조작 유형은 크게 4가지 유형으로 나눌 수 있습니다. CRUD(Create, Read, Update, Delete)라고 짧게 일컬을 수 있으며, 말 그대로 요소를 생성하고 읽고 갱신하고 삭제하는 것입니다.
 
CRUD의 의미CRUD의 의미
CRUD의 의미
💡
CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말로 공식 용어는 아닙니다. 사용자 인터페이스가 갖추어야 할 기능(정보의 참조/검색/갱신)을 가리키는 용어로도 사용됩니다.[4]
 
우리는 위에서 사용했던 예시를 활용하여 4가지 조작 유형 중 DOM을 통해 HTML요소를 갱신하는 방법을 간략하게 살펴보도록 하겠습니다.

3.2. 요소 접근 및 조작 예시

아래 예시에서 p 요소의 텍스트 콘텐츠를 변경하려면 어떻게 해야 할까요? 바로 노드 객체의 프로퍼티 및 메서드를 활용하면 됩니다.
 
document.getElementById("hello")
// document: 노드 객체, getElementById(): 노드 객체의 메서드
노드 객체의 프로퍼티 및 메서드
아래의 예시를 봅시다.
<html>
	<head>
		<title>제목</title>
		<link></link>
	</head>
  <body>
		<div id="hello">
			<p>안녕</p>
		</div>
	</body>
</html>
HTML 요소 간 중첩관계
const greetingText = document.getElementById("hello");
greetingText.innerText;
JavaScript로 요소 노드에 접근하기
‘JavaScript로 요소 노드에 접근하기’의 출력 결과‘JavaScript로 요소 노드에 접근하기’의 출력 결과
‘JavaScript로 요소 노드에 접근하기’의 출력 결과
그러면 JavaScript를 통해 아래 코드를 추가하면 브라우저 화면에 무슨 일이 생길까요?
greetingText.innerText = "잡았다 요 돔!";
JavaScript에 “잡았다 요 돔!”을 추가한 코드
JavaScript에 “잡았다 요 돔!”을 추가한 코드의 출력 결과JavaScript에 “잡았다 요 돔!”을 추가한 코드의 출력 결과
JavaScript에 “잡았다 요 돔!”을 추가한 코드의 출력 결과
이와 같이 p 요소 텍스트 콘텐츠 “안녕” 이 “잡았다 요 돔!” 텍스트로 변경되었습니다.
이처럼 DOM은 자바스크립트 언어가 HTML 요소에 접근할 수 있게 도와주어 HTML 요소를 쉽게 수정 및 조작할 수 있게 해줍니다. 이는 HTML 웹 문서를 동적으로 구현하고 싶을 때 일일이 수정하지 않아도 되므로 문서 조작에 효과적입니다.
여기까지가 DOM이란 무엇인지 간단히 알아보는 과정이었습니다. 다음 장부터는 앞서 살펴본 노드에 대해서 좀 더 자세히 알아보겠습니다.
 

Reference

  1. DOM이란 무엇일까요?
[1] https://www.w3.org/TR/DOM-Level-3-Core/
[2] https://dom.spec.whatwg.org/
  1. 렌더링 과정에서의 DOM
[3] https://terms.naver.com/entry.naver?docId=3348408&cid=43667&categoryId=43667
3. HTML을 조작할 수 있게 하는 API
[4] https://ko.wikipedia.org/wiki/CRUD