Published 2020. 11. 22. 16:33

DOM, CSSOM, BOM은 무엇일가?

문서 객체 모델(DOM)

문서 객체 모델(Document Object Model, DOM)은 자바스크립트 Node 객체들의 계층화된 트리입니다. HTML 문서가 브라우저에 의해 해석되어 실제 문서를 나타내는 노드 객체들의 트리 구조로 변환된다는 것입니다. 이 객체는 수정 가능합니다.

document 객체는 페이지의 기본 '진입점' 역할을 합니다. document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있습니다.

DOM의 목적은 자바스크립트를 사용해서 페이지 내 모든 요소들을 쉽게 조작(삭제, 추가, 바꾸기, 이벤트 처리, 수정)할 수 있도록 프로그래밍 인터페이스를 제공하는 것입니다.

CSS 객체 모델(CSS Object Model, CSSOM)은 CSS 규칙과 스타일시트를 객체로 나타내고 이 객체를 어떻게 읽고 쓸 수 있을지에 대한 설명을 담은 별도의 명세서입니다.

CSSOM은 문서에 쓰이는 스타일 규칙을 수정할 때 DOM과 함께 쓰입니다. 자바스크립트를 이용해 CSS 규칙을 추가 혹은 제거해야 하는 경우는 극히 드물긴 하지만, 이때 CSSOM이 사용됩니다.

브라우저 객체 모델(Browser Object Model, BOM)은 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타냅니다.

예를 들어,

navigator 객체는 브라우저와 운영체제에 대한 정보를 제공합니다. 가장 잘 알려진 프로퍼티는 현재 사용 중인 브라우저 정보를 알려주는 navigator.userAgent와 브라우저가 실행 중인 운영체제 정보를 알려주는 navigator.platform입니다.
location 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해줍니다.

명세서 참고

프로퍼티나 메서드에 대한 설명을 읽고 싶을 때 검색창에 ‘WHATWG [용어]’ 혹은 'MDN [용어]'로 검색하면 명세서나 MDN문서에서 원하는 내용을 쉽게 찾을 수 있습니다.