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을 우리는 웹을 동적으로 구현할 때 효과적으로 사용할 수 있습니다.
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> <head> <title>제목</title> <link></link> </head> <body> <div id="hello"> <p>안녕</p> </div> </body> </html>
‘HTML 요소의 구성’ 그림에서는
div 요소의 콘텐츠 안에 ‘안녕’이라는 텍스트만 있었지만 'HTML 요소 간 중첩 관계’ 그림에서는 div 요소에 p 태그가 추가되면서 div와 p 요소 간의 부모-자식 관계가 형성되었습니다.
그래서 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는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 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>
const greetingText = document.getElementById("hello"); greetingText.innerText;
그러면 JavaScript를 통해 아래 코드를 추가하면 브라우저 화면에 무슨 일이 생길까요?
greetingText.innerText = "잡았다 요 돔!";
이와 같이
p 요소 텍스트 콘텐츠 “안녕” 이 “잡았다 요 돔!” 텍스트로 변경되었습니다.이처럼 DOM은 자바스크립트 언어가 HTML 요소에 접근할 수 있게 도와주어 HTML 요소를 쉽게 수정 및 조작할 수 있게 해줍니다. 이는 HTML 웹 문서를 동적으로 구현하고 싶을 때 일일이 수정하지 않아도 되므로 문서 조작에 효과적입니다.
여기까지가 DOM이란 무엇인지 간단히 알아보는 과정이었습니다. 다음 장부터는 앞서 살펴본 노드에 대해서 좀 더 자세히 알아보겠습니다.
Reference
- DOM이란 무엇일까요?
- 렌더링 과정에서의 DOM
3. HTML을 조작할 수 있게 하는 API