문서 객체 모델(DOM)의 기본 개념
문서 객체(Document Object)는 브라우저 창에 표시되는 HTML 문서 전체를 대표하는 객체입니다. 이 객체는 다양한 속성을 통해 다른 객체들을 참조할 수 있으며, 이를 통해 개발자는 문서의 내용에 접근하고 수정할 수 있습니다.
이처럼 문서의 콘텐츠에 접근하고 변경하는 방식을 문서 객체 모델(Document Object Model), 줄여서 DOM이라고 부릅니다. DOM에서 객체들은 하나의 계층 구조로 조직되어 있으며, 이러한 위계적 구조는 웹 문서 안의 객체들이 배치되는 방식 그대로 적용됩니다.
DOM 계층 구조의 주요 객체
1. Window 객체 (최상위)
Window 객체는 계층 구조의 가장 꼭대기에 위치합니다. 객체 위계의 최상위 요소로서, 브라우저 창 자체를 나타내며 그 아래의 모든 객체를 포함합니다.
2. Document 객체
창(window)에 로드되는 각각의 HTML 문서는 Document 객체가 됩니다. Document 객체는 페이지의 실제 콘텐츠를 담고 있으며, DOM 조작의 중심 역할을 수행합니다.
3. Form 객체
<form>...</form> 태그 사이에 포함된 모든 요소가 Form 객체를 구성합니다. 사용자 입력을 받기 위한 양식 전체가 하나의 객체로 다뤄집니다.
4. 폼 컨트롤 요소(Form Control Elements)
Form 객체 내부에는 해당 객체에 정의된 모든 컨트롤 요소가 포함됩니다. 여기에는 텍스트 필드(text field), 버튼(button), 라디오 버튼(radio button), 체크박스(checkbox) 등이 속합니다.
정리하며
DOM은 단순히 HTML을 읽는 도구가 아니라, 웹 페이지의 구조를 객체의 위계로 표현하여 JavaScript가 문서를 동적으로 탐색·수정할 수 있게 해주는 핵심 인터페이스입니다. Window → Document → Form → 폼 컨트롤 요소로 이어지는 계층 구조를 이해하면, 웹 개발에서 요소를 선택하고 조작하는 작업이 한결 명확해집니다.