그룹스터디 [Browser: BOM]

BOM (Browser Object Model)

• 웹페이지 내용을 제외한 브라우저 창에 포함된 모든 객체 요소.

Window 객체를 통한 접근 방식

Window 객체

• 웹 브라우저 창을 나타내는 객체이고 대부분의 웹 브라우저에서 지원한다.
• Window 객체 메소드는 전역 함수이다.

브라우저 창 크기 조절

• 브라우저 창 = viewport
• innerHeight, innerWidth 프로퍼티로 브라우저 창 크기를 조절할 수 있다.

브라우저 새 창 열기

• window.open()

브라우저 창 닫기

• 현재 브라우저나 특정 브라우저 창을 닫을 수 있다.
• window.close()

Location 객체

• 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나 새 문서를 불러올 때 사용한다.
  • 현재 문서의 URL 주소 : location.href
  • 현재 문서의 호스트 이름 : location.hostname
  • 현재 문서의 파일 경로명 : location.pathname

History 객체

• 브라우저 히스토리 정보를 문서와 문서 상태 목록을 저장하는 객체
  • 히스토리 목록 개수 : history.length
  • 히스토리 목록 접근
    • back 메소드 : 브라우저 히스토리 목록에서 바로 이전 URL로 이동 (window.history.back())
    • forward 메소드 : 브라우저 히스토리 목록에서 바로 다음 URL로 이동 (window.history.forward())

Screen 객체

• 사용자 디스플레이 화면에 다양한 정보 저장
  • 사용자 화면 크기 : 사용자의 디스플레이 화면의 크기를 pixel 단위로 반환 (screen.width, screen.height)
  • 현재 브라우저 창 크기 : window.outerWidth, window.outerHeight

++

• (innerWidth & innerHeight) vs (outerWidth & outerHeight)
  • innerWidth와 innerHeight : 창 틀을 뺀 내용과 스크롤을 포함한 크기
  • outerWidth와 outerHeight : 창 틀을 포함한 크기