[JavaScript] Browse Object Model

BOM (Browse Object Model)

BOM: 브라우저 객체 모델

• 웹 브라우저 창과 관련된 객체를 제공하는 JS 모델
• 웹 브라우저 자체를 조작하는 기능 제공 (브라우저 환경에서만 동작)

BOM의 여러가지 객체

• document
• history
• location
• navigator
• alert - 응답만 받는 경고창
• close
• open
• prompt - 입력을 받을 수 있는 경고창
• confirm

Time 함수

• setTimeout
• clearTimeout
• setInterval
• clearInterval

가 있다.

---

BOM 종류에 대해..

시간 함수

• 시간 함수는 1000ms = 1s로 환산하여 계산한다.

• setTimeout() - 일정 시간 후 코드 실행

    setTimeout(function, 지연 시간);
  

• clearTimeout() - setTimeout 취소

    clearTimeout(setTimeout 객체);
  

• setInterval() - 일정 시간 간격마다 실행

    setInterval(function, 시간 간격);
  

• clearInterval() - setInterval 중지

    clearInterval(setInterval 객체);
  

---

location

• 현재 웹페이지의 URL 정보를 제공, 페이지 이동 가능

프로퍼티 및 메서드	설명
location.href	현재 웹페이지의 URL, 지정 시 특정 URL로 이동
location.hostname	도메인 (예: example.com)
location.pathname	경로 (예: /member)
location.search	쿼리문자열 (?key=value)
location.reload()	페이지 새로고침

navigator

• 현 사용자의 브라우저 및 운영체제 정보를 제공

프로퍼티 및 메서드	설명
navigator.userAgent	브라우저 정보
navigator.language	사용 언어 (예: “ko-KR”)
navigator.platform	운영체제 정보 (예: “WIn32”)
navigator.onLine	온라인 연결 상태 (true or false)

history

• 브라우저 탐색 기록을 관리

프로퍼티 및 메서드	설명
history.back()	뒤로 가기 (이전 페이지)
history.forward()	앞으로 가기 (다음 페이지)
history.go(숫자)	숫자만큼 앞으로(뒤로) 가기
history.length	방문 기록 개수

screen

• 사용자 화면 정보를 제공

프로퍼티 및 메서드	설명
screen.width	화면 너비
screen.height	화면 높이
screen.availWidth	사용가능한 화면 너비
screen.availHeight	사용가능한 화면 높이
screen.colorDepth	색상 비트
screen.pixelDepth	픽셀 깊이

window (BOM 최상위 객체)

• 브라우저의 창을 의미

프로퍼티 및 메서드	설명
window.open()	새로운 창 열기
window.close()	현재 창 닫기
window.alert()	경고창
window.prompt()	값을 입력 받는 창
window.confirm()	확인, 취소 창

• window.open()

    window.open(URL, 이름, 속성, 교체여부);
  

  이름: 창의 이름 제시 or _blank(새 창) or _self(현재 창에서 열기)

  속성: 창의 크기, 위치 등.. 제시

  교체여부: true이면 현재 브라우저 기록을 새로운 페이지로 교체

---

JavaScript 별도 함수

closest() 함수

• 특정 선택자와 가장 가까운 요소를 찾음.
• 현재 요소부터 시작해서 부모 요소들을 거슬러 올라가서
  가장 가까운 요소를 반환 (자식 요소 탐색 X)

    요소.closest(선택자)
  

• 찾지 못하면 null 을 반환
• 부모 요소를 직접 반환하는 parentElement 와는 차이가 있음.

cloneNode(true) 함수

• 특정 요소(DOM 요소)를 복제한 Node를 생성.
  true: 해당 요소와 자식 노드들까지 모두 복사
  false: 해당 요소만 복사하고 자식 노드들은 포함하지 않음

    요소.cloneNode(true or false)
  

• 특정 요소를 복사하여, 주어진 리스트에 추가할 수 있음.