자바스크립트의 Window 객체: 전역 객체, 문서 객체 모델(DOM), 브라우저 객체 모델(BOM)이란?

Window 객체의 역할

1. 자바스크립트 코드의 전역 객체

2. 브라우저 창(browser window)를 대체하고, 이를 제어할 수 있는 메서드 제공

1번 예시. 전역 객체

// 윈도우 전역 객체의 예시 프로퍼티 설정
window.myProperty = 'Hello, World!';

// 윈도우 전역 객체의 예시 메서드 정의
window.myMethod = function () {
  console.log('This is a method on the global object.');
};

// 윈도우 전역 객체의 프로퍼티 접근 및 메서드 호출
console.log(window.myProperty);
window.myMethod();

2번 예시. 브라우저 창 대체

// 윈도우 전역 객체의 예시 프로퍼티 설정
window.location = 'https://www.example.com';
window.innerWidth = 800;
window.innerHeight = 600;

// 윈도우 전역 객체의 예시 메서드 정의
window.alert = function (message) {
  console.log('Alert:', message);
};

// 윈도우 전역 객체의 프로퍼티 접근 및 메서드 호출
console.log(window.location);
console.log(window.innerWidth, window.innerHeight);
window.alert('This is an alert message.');

문서 객체 모델(DOM, Document Object Model)

• 문서 객체 모델은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내줍니다. 이 객체는 수정 가능합니다.
• document 객체는 페이지의 기본 진입점 역할을 합니다.

   let titleElement = document.getElementById("title");
   let buttonElement = document.getElementById("button");
   // html 태그의 id 값을 가진 요소를 documenet 객체를 통해 가져오기

※ 참고로, DOM은 브라우저만을 위한 모델이 아닙니다. 서버 측에서도 DOM을 사용할 수 있습니다.

※ 잘 쓰이진 않지만 CSS 객체 모델(CSSOM, CSS Object Model)이라는 것도 존재합니다.

브라우저 객체 모델(BOM, Browser Object Model)

• 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타냅니다.
• navigator, location, alert, confirm, prompt 등은 BOM의 일부입니다.
• BOM은 HTML 명세서의 일부입니다.