BOM 이란?

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.

https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV

프론트엔드 날개달기

 

 

---

 

브라우저 객체 모델(BOM)이란 무엇인가?

브라우저 객체 모델(BOM) 개요

• 브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저를 객체화한 것이다.
• BOM은 자바스크립트로 브라우저를 제어하기 위해 사용된다.
• 브라우저에서 제공하는 여러 기능들을 자바스크립트로 제어할 수 있다.

주요 브라우저 객체

1. Window 객체
   • 브라우저 창 자체를 의미한다.
   • 모든 객체가 소속된 최상위 객체이다.
   • 생략이 가능하다! open() 이렇게만 쓸 수도 있음
   • 예: 새 탭 열기 (window.open()), 창 닫기 (window.close()), 경고창 띄우기 (window.alert()).
2. Document 객체
   • 현재 문서에 대한 정보를 가지고 있다.
   • DOM 트리의 최상위 노드이다.
   • 예: HTML 요소에 접근하고 수정하기 (document.querySelector()).
3. History 객체
   • 브라우저의 방문 기록을 제어할 수 있다.
   • 뒤로 가기 (history.back())
   • 앞으로 가기 (history.forward()).
4. Location 객체
   • 문서의 URL과 관련된 정보를 가지고 있다.
   • URL 변경 (location.href = '<https://www.google.com>').
5. Screen 객체
   • 사용자의 디스플레이 화면에 대한 정보를 가지고 있다.
   • 예: 디스플레이 크기 확인 (screen.width, screen.height).
6. Navigator 객체
   • 브라우저에 대한 정보를 제공한다.
   • 예: 위치 정보 가져오기 (navigator.geolocation.getCurrentPosition()).

BOM 객체 사용 예시

1. Window 객체
   • 새 탭 열기: window.open('<https://www.example.com>');
   • 창 닫기: window.close();
   • 경고창 띄우기: alert('Hello World');
2. Document 객체
   • HTML 요소 접근 및 수정:
   • document.querySelector('#custom-id').textContent = 'New Text';
3. History 객체
   • 뒤로 가기: history.back();
   • 앞으로 가기: history.forward();
4. Location 객체
   • 현재 문서의 호스트 정보 가져오기: console.log(location.host);
   • URL 변경: location.href = '<https://www.google.com>';
5. Screen 객체
   • 디스플레이 정보 출력:
   • console.log(screen.width, screen.height);
6. Navigator 객체
   • 위치 정보 가져오기:
   • navigator.geolocation.getCurrentPosition(function(position) { console.log(position.coords.latitude, position.coords.longitude); });

결론 및 정리

• BOM은 자바스크립트로 브라우저를 제어할 수 있도록 하는 인터페이스이다.
• 다양한 브라우저 객체를 통해 브라우저의 여러 기능을 제어할 수 있다.