Don't Panic
in JS ☕ 3분 읽기

[JS] 브라우저 객체 모델(BOM)

#JS
목차

BOM (Browser Object Model)

브라우저 객체 모델(BOM)이란?

자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있습니다. 이때 사용하는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model) 입니다.

  • BOM은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아닙니다.
  • 하지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 줍니다.
  • 자바스크립트에서는 이러한 BOM의 객체들을 전역 객체(global object) 로 사용할 수 있습니다.

Window 객체

window 객체는 웹 브라우저의 창(window)을 나타내는 객체입니다.

  • 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됩니다.
  • window 객체의 메소드는 전역 함수이며, 프로퍼티는 전역 변수가 됩니다.
  • 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됩니다.

주요 기능

기능사용 방법
새 창 열기window 객체의 open() 메소드를 이용하면 새로운 브라우저 창을 열 수 있습니다.
창 크기 조절innerHeight, innerWidth 프로퍼티를 이용하면 브라우저 창의 크기를 설정할 수 있습니다.
창 닫기close() 메소드를 이용하면 현재 또는 특정 브라우저 창을 닫을 수 있습니다.

Document 객체

window 객체의 가장 중요한 프로퍼티 중 하나가 바로 document 객체입니다.

document 객체는 브라우저 창에 표시되는 내용에 해당하는 문서(document)를 나타내는 객체입니다.

Location 객체

location 객체는 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있습니다.

  • 이 객체는 Window 객체의 location 프로퍼티와 Document 객체의 location 프로퍼티에 함께 연결되어 있습니다.
  • 프로퍼티와 메소드를 이용하면 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있습니다.

주요 프로퍼티

프로퍼티반환 값
href현재 문서의 전체 URL 주소를 문자열로 반환
hostname현재 문서의 인터넷 호스트 이름을 반환
pathname현재 문서의 파일 경로명을 반환

주요 메소드

메소드동작
assign()지정된 URL 주소에 존재하는 문서를 브라우저 창에 불러옵니다.
replace()새 문서를 불러오기 전에 현재 문서를 히스토리에서 제거합니다. (이 점이 assign()과 다릅니다.)
reload()브라우저 창에 현재 문서를 다시 불러옵니다.

navigator 객체는 브라우저 공급자 및 버전 정보 등, 브라우저에 대한 다양한 정보를 저장하는 객체입니다.

대화 상자(dialog box)

사용자에게 보여줄 수 있는 간단한 대화 상자를 만들기 위해 window 객체는 다음과 같은 메소드를 제공합니다.

  1. alert()

    • 사용자에게 간단한 메시지를 보여주고, 그에 대한 사용자의 확인을 기다립니다.

  2. confirm()

    • 사용자에게 간단한 메시지를 보여주고, 사용자가 확인이나 취소를 누르면 그 결과를 불리언 값으로 반환합니다.
    • 확인을 누르면 true, 취소를 누르면 false를 반환합니다.

  3. prompt()

    • 사용자에게 간단한 메시지를 보여주고, 사용자가 입력한 문자열을 반환합니다.
    • 입력한 텍스트를 문자열 타입으로 반환합니다.

단, 이러한 대화 상자는 모두 사용자의 응답이 있을 때까지 브라우저의 실행을 강제로 중단시킵니다. 사용자 측면에서 보면 불편할 수 있으므로, 대화 상자는 될 수 있으면 자주 사용하지 않는 것이 좋습니다.

타이머(timer)

window 객체는 일정 시간이 지난 뒤에 함수를 호출할 수 있도록 다음 메소드를 제공합니다.

  1. setTimeout()

    • 명시된 시간이 지난 뒤에 지정된 함수를 호출합니다.
    • 성공적으로 호출되면 설정된 timeoutID를 반환합니다.
    • 밀리초(milliseconds) 단위로 지연 시간을 설정할 수 있습니다.

  2. setInterval()

    • 지정된 시간 간격마다 지정된 함수를 반복적으로 호출합니다.
    • 사용 형식: window.setInterval(호출할함수, 지연시간);
    • 성공적으로 호출되면 설정된 timeoutID를 반환합니다.
    • 밀리초(milliseconds) 단위로 시간 간격을 설정할 수 있습니다.

  3. clearTimeout()

    • setTimeout()의 반환값을 인수로 전달하면, 계획된 함수의 호출을 취소할 수 있습니다.

  4. clearInterval()

    • setInterval()의 반환값을 인수로 전달하면, 반복되는 함수의 호출을 취소할 수 있습니다.

관련 글