BOM과 DOM의 차이
BOM과 DOM은 모두 웹 브라우저 환경에서 사용되는 객체 모델로, 각각 브라우저와 문서의 요소에 접근하고 조작하는 데 사용된다. 그러나 두 객체 모델은 다른 목적과 영역에서 사용된다.
BOM (Browser Object Model):
- 브라우저 환경에서 브라우저 창(window)과 관련된 객체들을 포함하는 객체 모델
- 웹 페이지가 아니라 브라우저 자체를 다루는 데 사용
- BOM을 통해 브라우저 창의 속성, 메서드, 이벤트 등에 접근하고 조작
주요 객체와 기능
window: 브라우저 창을 나타내며, 전역 객체로서 많은 프로퍼티와 메서드를 제공navigator: 브라우저와 사용자의 시스템 정보에 접근할 수 있는 객체location: 현재 웹 페이지의 URL을 다루고 조작하는 데 사용history: 브라우저의 세션 히스토리를 조작하는 데 사용screen: 사용자의 화면 정보와 해상도에 접근할 수 있는 객체
DOM (Document Object Model):
- 웹 문서의 요소(element)들을 계층 구조로 나타내며, 이를 프로그래밍적으로 조작할 수 있는 인터페이스를 제공하는 객체 모델
- HTML 또는 XML 문서의 요소와 속성을 JavaScript 객체로 표현하여 조작
주요 특징
- 웹 문서의 각 요소는 DOM 노드로 표현
- HTML 문서의 각 태그는 DOM 요소 노드로 매핑
- 계층 구조로 되어 있어 부모-자식 관계로 구성
- JavaScript를 사용하여 웹 페이지의 콘텐츠를 동적으로 변경 가능
- 이벤트 처리와 상호작용을 위한 메서드와 이벤트 핸들링을 제공
비교
- BOM은 브라우저 창과 관련된 객체와 동작을 다루는 데 사용되고, DOM은 문서의 요소와 콘텐츠를 다루는 데 사용
- BOM은 브라우저 환경과 사용자 정보에 관련한 기능을 제공하며, DOM은 문서의 구조와 내용을 조작하는 데 집중
- BOM은 브라우저마다 지원하는 기능이 다르며, DOM은 표준화된 인터페이스로 웹 표준을 준수
- BOM은 window 객체를 중심으로 동작하고, DOM은 HTML 요소를 다루는 데 집중