Browser Object Model

1. BOM 에 대하 알아 보자

JavaScript에서 BOM (Browser Object Model)은 웹 브라우저와 상호작용하기 위한 객체 모델입니다. BOM을 사용하면 JavaScript가 브라우저 창 및 브라우저의 기타 요소와 상호작용할 수 있습니다. BOM은 DOM(Document Object Model)과는 달리 표준화되지 않았기 때문에 브라우저마다 차이가 있을 수 있습니다.

 

💡정리💡

프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화 시켜 놓은 것을 의미합니다. 추가 적으로 BOM은 하나의 객체만을 가리키는 것이 아니라 브라우저와 관련된 여러 객체들을 포함하며 그 구조는 최상위 객체는 window 객체와 그 하위 객체들로 이루어져 있습니다

 

2. Window Object 와 하위 객체들에 대해 알아 보자

Window Object
    ├── Navigator
    ├── Location
    ├── Screen
    ├── History
    └── Document (DOM 진입점)

 

1. Window Object
   • 모든 BOM 및 DOM 요소는 window 객체의 일부입니다.
   • window 객체는 전역 객체로, 변수, 함수, 객체를 포함합니다.
2. Location Object
   • 현재 창의 URL을 관리하며, 리다이렉트, 리로드 등을 수행할 수 있습니다.
   • 예: window.location.href를 사용하여 현재 URL을 가져올 수 있습니다.
3. History Object
   • 브라우저의 세션 히스토리에 접근할 수 있습니다.
   • 예: window.history.back()을 사용하여 이전 페이지로 이동할 수 있습니다.
4. Navigator Object
   • 브라우저의 정보에 접근할 수 있습니다.
   • 예: window.navigator.userAgent를 사용하여 사용자 에이전트 문자열을 가져올 수 있습니다.(사용자의 브라우저 종류, 버전 및 사용자의 운영 체제에 관한 정보를 알 수 있습니다)
5. Screen Object
   • 사용자의 스크린 정보에 접근할 수 있습니다.
   • 예: window.screen.width와 window.screen.height를 사용하여 스크린의 너비와 높이를 가 져올 수 있습니다.
6. Document Object
   • 현재 웹 페이지의 DOM에 접근할 수 있습니다.
   • 예: window.document.getElementById('id')를 사용하여 특정 요소를 선택할 수 있습니다.

 

History Object

 

Location Object

 

시나리오 코드 1

---

---