Window, BOM, DOM

Window Object

• 브라우저에서 열린 창을 의미 e.g. new Tab
• 브라우저에 의해 자동으로 생성

Window Object, Document Object Model, Browser Object Model 계층구조

BOM(Browser Object Model)

• 브라우저 속성을 제어하기 위해 브라우저에 의해 구현된 속성과 메서드의 컬렉션
  • 즉, JavaScript가 BOM을 이용해 브라우저와 통신
• 주요 BOM 객체
  • document : 전체 HTML 문서를 나타낸다. (DOM tree)
  • frames : 현재 브라우저 창의 모든 하위 프레임(e.g. <iframe>)을 배열과 같은 객체로 나열
  • history : 브라우저에서 사용자가 방문한 URL 저장
  • location : 브라우저 창의 위치
  • navigator : 방문자 브라우저 및 운영체제에 대한 정보
  • screen : 사용자 브라우저 화면에 대한 정보(e.g. 창 화면 너비/ 높이 등…)

DOM(Document Object Model)

• BOM의 오브젝트 중 하나
• Document 내부의 요소에 액세스하는 API
  • 즉, JavaScript가 웹 사이트를 구조화, 조작 및 스타일링 할 수 있다.
• 부모 및 자식 트리의 계층 구조로 매핑
• DOM tree

 

 

참고사이트

- freeCodeCamp

What’s the Document Object Model, and why you should know how to use it.

- DotNetTricks

Understanding DOM and BOM