웹 문서에서 객체의 계층 구조
웹 문서의 객체들은 계층 구조(hierarchy) 형태로 조직됩니다. 즉, 웹 문서 내 모든 객체는 상하 관계를 가지며, 최상위 객체에서부터 하위 요소들로 순차적으로 배열됩니다. 이러한 계층 구조를 이해하면 자바스크립트 등을 활용해 웹 페이지의 각 요소에 효과적으로 접근하고 제어할 수 있습니다.
주요 객체별 계층 구조 설명
- Window 객체(윈도우 객체) − 계층 구조의 최상단에 위치하는 객체입니다. 객체 계층 구조 전체에서 가장 윗부분을 담당하는 최상위 요소이며, 브라우저 창 자체를 나타냅니다.
- Document 객체(문서 객체) − 창(window)에 로드되는 각각의 HTML 문서가 하나의 document 객체가 됩니다. 이 객체는 웹 페이지의 실제 콘텐츠, 즉 텍스트, 이미지, 링크 등 페이지를 구성하는 모든 내용을 포함합니다.
- Form 객체(폼 객체) −
<form>...</form>태그 사이에 포함된 모든 요소들이 하나의 form 객체를 구성합니다. 사용자 입력을 받기 위한 영역 전체를 의미합니다. - 폼 컨트롤 요소(Form control elements) − form 객체 내부에는 해당 객체에 정의된 다양한 컨트롤 요소들이 포함됩니다. 대표적으로 텍스트 필드(text fields), 버튼(buttons), 라디오 버튼(radio buttons), 체크박스(checkboxes) 등이 있습니다.
객체 계층 구조 예시
아래 이미지는 몇 가지 중요한 객체들이 계층 구조로 배치된 간단한 예시입니다. window 객체를 최상위로 하여, 그 아래 document 객체가 위치하고, document 아래 form 객체, 그리고 form 객체 안에 각종 폼 컨트롤 요소들이 순차적으로 포함되는 구조를 보여줍니다.
정리
요약하면, 웹 문서의 객체 구성은 다음과 같은 위계를 따릅니다.
window → document → form → 폼 컨트롤 요소(텍스트 필드, 버튼, 라디오 버튼, 체크박스 등)
이러한 DOM(Document Object Model) 계층 구조를 파악해 두면 특정 요소에 접근할 때 정확한 경로를 지정할 수 있어 웹 개발 시 큰 도움이 됩니다.