DOM이란?

이 글은 DOM을 간단하게 이해하는 정도로만 작성한 글이며 자세한 내용은 구글링을 통해서 개념을 가지는 것이 좋습니다.

DOM이란?

DOM은 Document Object Model 의 줄인말로 HTML 문서를 구조화 한 것으로 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경 할 수 있도록 도와주는 인터페이스 역할을 한다.

DOM은 HTML, XML 문서를 Tree형식으로 구조되며, Javascript와 같은 스크립트 언어를 사용하여 수정할 수 있다.

DOM의 Tree 구조 예시는 아래 사진과 같다.

DOM Tree 구조 예시. 출처 : 위키트리

DOM은 언제 사용할까?

그러면 DOM이라는 것을 언제 사용할까?

HTML로 웹페이지를 사용해보고 만들어본 경험자라면 알겠지만, 우리가 흔히 아는 웹페이지는 가만히 보여지는 이미지가 아니다.

버튼을 눌러서 어떠한 동작을 하고, 다른 페이지로 이동, 다운로드, 데이터 변경 등 상호작용을 한다.

이 모든 것을 HTML 태그들을 이용해서 웹페이지를 만들 수 없다. 동적인 기능을 이용하기 위해서 우리는 JavaScript와 같은 스크립트 언어들을 사용하고 DOM 구조를 변경한다.

 

요약

DOM은 HTML을 위한 API이며 HTML을 탐색을 하거나 구조를 바꿀 수 있다.