[Frontend] BOM과 DOM

취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.

 

✅ BOM

브라우저 객체 모델(BOM, Browser Object Model)은 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다.

BOM은 DOM과 달리 W3C 표준 객체 모델은 아니지만 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다.

자바스크립트에서는 이러한 BOM의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

BOM의 구성

 

✔️ window 객체

window 객체는 웹 브라우저의 창을 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다.

자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다.

window 객체의 메서드는 전역 함수이며 window 객체의 프로퍼티는 전역 변수가 된다.

DOM의 요소들도 모두 window 객체의 프로퍼티에 속하게 된다.

 

window 객체의 메서드, 프로퍼티는 여러 가지 종류가 있는데 몇 가지만 살펴보자면 다음과 같다.

• window.innerWidth : 브라우저 창의 viewport 너비
• window.innerHeight : 브라우저 창의 viewport 높이
• window.open : 새 창 열기

 

 

✅ DOM

문서 객체 모델(DOM, Document Object Model)은 웹 페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다.

최상위 인터페이스로 Node가 있으며 트리 구조를 가지고 있다.

출처 : https://web.stanford.edu/class/cs98si/slides/the-document-object-model.html

 

DOM에 대한 자세한 설명은 다음의 포스팅에서 확인할 수 있다.

https://cansweep.tistory.com/307?category=1031262 

[3주차] DOM과 이벤트

 

 

🔍 참조

window 객체 http://www.tcpschool.com/javascript/js_bom_window