브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기

브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기

브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저와 관련된 객체들의 모음입니다. 이러한 객체들을 사용하여 브라우저와 상호작용하고 웹 페이지의 동작을 제어할 수 있습니다. BOM의 기본 개념과 주요 구성요소들을 간략하게 알아보고 각 구성요소에 대한 더 상세한 내용과 사용 방법은 향후 블로그 글에서 다룰 예정입니다.

▼ 브라우저 객체 모델의 계층 구조

브라우저 객체 모델 기본 개념 및 구성 요소

1. window 객체

  • BOM의 중심이자 최상위 객체로, 브라우저 창을 대표합니다.
  • 전역 변수, 함수, 위치, 타이머 등 다양한 기능을 제공합니다.
  • 주요 속성: innerWidth, innerHeight, outerWidth, outerHeight, localStorage, sessionStorage, event 등
  • 예제 코드:
// 경고창 띄우기
window.alert("Hello, World!");

2. location 객체

  • 현재 창의 URL 정보를 다루는 데 사용됩니다.
  • 페이지 이동, 새로고침, URL 파싱 등의 기능을 제공합니다.
  • 주요 속성: href, protocol, host, hostname, port, pathname, search, hash 등
  • 예제 코드:
// 현재 페이지의 URL 출력
console.log(location.href);

3. history 객체

  • 브라우저의 방문 기록을 관리합니다.
  • 뒤로 가기, 앞으로 가기, 방문한 페이지로 이동 등의 기능을 제공합니다.
  • 주요 속성: length, state 등
  • 예제 코드:
// 브라우저의 뒤로 가기 기능
history.back();

4. navigator 객체

  • 브라우저와 사용자의 시스템 정보를 제공합니다.
  • 브라우저 종류, 버전, 운영체제, 화면 해상도 등의 정보를 얻을 수 있습니다.
  • 주요 속성: userAgent, appName, appVersion, platform, language 등
  • 예제코드
// 브라우저의 사용자 에이전트(User Agent) 출력
console.log(navigator.userAgent);

5. screen 객체

  • 사용자의 디스플레이 정보를 제공합니다.
  • 화면 해상도, 컬러 깊이, 사용 가능한 영역 등의 정보를 얻을 수 있습니다.
  • 주요 속성: width, height, availWidth, availHeight, colorDepth, pixelDepth 등
  • 예제 코드:
// 화면의 가로 해상도 출력
console.log(screen.width);

6. document 객체

  • 웹 페이지의 내용을 표현하며, DOM(Document Object Model)의 최상위 객체입니다.
  • 웹 페이지의 요소에 접근, 수정, 추가, 삭제 등의 작업을 수행할 수 있습니다.
  • 주요 속성: title, URL, domain, head, body, forms, links, images, cookie 등
  • 예제 코드:
// 웹 페이지의 제목 변경
document.title = "새로운 제목";

☞ 이 중에서도 자주 사용하는 “window“, “document” 객체의 속성과 메서드에 대해서는 이어서 포스트 할 계획입니다.

자바스크립트 기초 이전 게시물

  1. 자바스크립트 객체: 객체 생성, 접근, 변경, 추가, 삭제 방법
  2. 자바스크립트 문자열 및 숫자 처리: String과 Number 내장 객체
  3. 자바스크립트 날짜 및 시간 처리: Date 내장 객체 사용법
  4. 자바스크립트 수학 연산 처리: Math 내장 객체 사용법
위로 스크롤