자바스크립트는 큰 틀에서 보면 DOM, BOM, 그리고 Core로 분류된다고 한다. 참고로 Core는 문법, 라이브러리 등을 의미한다는 점 정도로만 알아두고, 객체 모델인 DOM과 BOM에 대해 다뤄본다.

객체 모델이란?

웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있는데, 이 객체들이 서로 계층적인 관계로 구조화되어 있는 것을 객체 모델이라 한다. 참고로, 브라우저상에서 웹문서만 담당하는 게 document 객체고 브라우저 전체를 담당하는 게 window 객체다. 전자가 DOM과 관련되어 있고, 후자가 BOM과 관련되어 있다.

DOM(Document Object Model)

• 웹문서를 다룰 수 있게 하는 인터페이스다.
• 웹문서의 객체 지향적 표현이라 할 수 있으며, tree 형태로 구조화된 노드와 프로퍼티, 메소드를 갖고 있는 객체로써 문서를 표현한다.
• DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해 노드(node), 스타일, 속성, 이벤트 등을 제어할 수 있게 해준다.

BOM(Browser Object Model)

• 브라우저와의 소통할 수 있게 해주는 인터페이스다.
• 이 상호작용에 사용되는 메서드와 속성이 브라우저마다 대부분 비슷해서 이를 통칭하여 BOM이라 한다.

• 대표적인 브라우저 객체 모델들은 다음과 같다.

  • window : 최상위 객체로, 각 프레임별로 하나씩 존재
  • navigator : 브라우저명과 버전정보를 속성으로 가짐
  • document : 현재문서에 대한 정보
  • location : 현재 URL에 대한 정보, 브라우저에서 사용자가 요청하는 URL
  • history : 현재의 브라우저가 접근했던 URL history
  • screen : 브라우저의 외부환경에 대한 정보를 제공

---

[참고자료]
https://heecheolman.tistory.com/35
https://iwantadmin.tistory.com/108