Dom 이란

[그림] HTML과 DOM의 구조

이번 유닛에서는 HTML을 바라보는 또 다른 관점, DOM(Document Object Model)을 학습합니다. DOM은 프로그래머 관점에서 바라 본 HTML 입니다. DOM을 이해하고 조작할 수 있으면, HTML을 단순한 문서에서 웹 앱으로 업그레이드할 수 있습니다. DOM은 브라우저 환경에서 자바스크립트를 이용해 HTML을 조작할 수 있습니다. HTML 문서에 이미 작성되어 있는 엘리먼트에 접근하거나, 새로운 엘리먼트를 생성 또는 삭제할 수 있습니다. 이번 유닛을 통해 DOM을 이해하고, HTML과 자바스크립트를 연결하는 방법을 알아봅니다. 처음으로 DOM을 학습할 때에는 코드로 DOM을 조작하는 일이 낯설 수밖에 없습니다. 이번 유닛의 콘텐츠를 따라 학습하면, 코드에서 DOM을 다루는 일이 보다 익숙해질 겁니다.

 

 

DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model입니다. 즉, 여러분이 자바스크립트를 사용할 수 있으면, DOM으로 HTML을 조작할 수 있습니다.

HTML을 조작할 수 있다는게 무슨 뜻일까요? DOM을 위해 여러 뛰어난 웹 개발자들이 모여, HTML을 철저히 분석했습니다. 분석한 내용으로 HTML의 아주 작은 부분까지 접근할 수 있는 구조(Model; Structure)를 만들어 냈습니다. 이렇게 만들어진 구조를 이용하여 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다. 앞서 학습한 조건문과 반복문, 배열, 객체를 활용하면 SNS에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 할 수 있습니다.

자바스크립트는 다양한 일을 할 수 있지만, 웹 페이지를 제어하기 위한 목적으로 오랜 기간 사용되었습니다. 이번 유닛에서 DOM을 학습하고, 웹 개발에 가장 적합한 언어인 자바스크립트로 홈페이지를 조금 더 다이나믹하게 만듭니다.