DOM과 BOM
무엇을 먼저 해야할까
이전 글에서도 말했듯이 당장 어떤 것 부터 공부해야할 지 찾아보다가 https://www.zerocho.com/lecture를 참고하여 Excution Context 부터 공부를 하려고 했지만..?
1
console.log(window.v0, window.n0, window.l0, window.c0);
평소에는 아무 생각없이 위 코드 처럼 document 및 window 객체를 이용했지만 이제부터라도 어느정도의 개념은 알고 사용하려고 하기에 이 개념부터 우선으로 공부해보려고 한다.
처음부터 정확한 길을 모르기 때문에 앞으로도 이러한 진행이 많을거 같다. 하지만 계속 강조하겠지만 나는 처음부터 모든 것을 공부하고 개발하지 않을 것이다.
window
자바스크립트의 최상위 객체 / 전역 객체 / 모든 객체가 소속된 객체
나는 사실 브라우저의 구조가 곧 DOM인 줄 알았는데 최상위에 window 객체가 존재했다.
window는 브라우저 창을 의미하며 역할은 아래와 같다.
1. First, it is a global object for JavaScript code.
2. Second, it represents the “browser window” and provides methods to control it.
말 그대로 브라우저의 전역 객체로써 창을 제어하는 기능들을 제공하고,
직접 전역 변수나 전역 함수를 선언해 window 객체의 프로퍼티로써 이용이 가능하다.(하지만 이 방법은 권장하지 않는다.)
1
2
3
window.innerHeight // window's property
window.myvar // user-defined property
window.myfunc() // user-defined property
DOM(Document Object Model)
HTML, XML 문서 등을 브라우저가 이해할 수 있도록 트리 구조로 표현하고, 문서 요소에 접근하고 조작하는 방법을 정의
즉 웹 페이지와 관련된 인터페이스를 제공하여 웹 페이지의 구조, 콘텐츠, 스타일 등을 조작할 수 있게 해준다.
대표적인 DOM의 객체로 document가 있으며 아래는 DOM의 사용예시이다.
1
2
const textElem = document.getElementById('text');
textElem.style.background = 'red';
BOM(Browser Object Model)
웹 브라우저와 관련된 인터페이스를 제공
즉 웹 브라우저의 창, 히스토리, 위치 등을 다룰 수 있게 해준다.
대표적인 BOM 객체로는 window, navigator,location, screen, history 등이 있으며 간단한 설명은 아래와 같다.
| 객체 | 역할 |
|---|---|
| window | 브라우저 창의 크기를 조절하거나, 새로운 창을 열고 닫는 등의 작업을 수행 |
| navigator | 사용자의 브라우저와 관련된 정보 |
| location | 브라우저의 url에 대한 정보 |
| screen | 사용자의 화면과 관련된 정보를 제공 |
| history | 브라우저의 세션 히스토리를 다룸 |
아래는 BOM의 사용예시이다.
1
2
3
4
5
6
7
window.open('www.google.co.kr'); //새로운 창 열기
console.log(navigator.userAgent); // 사용자의 브라우저 정보
location.href = 'www.google.co.kr'; // google로 이동
console.log(screen.width); // 화면의 크기
history.back(); // 뒤로가기
마무리
정리하자면 DOM은 웹 페이지의 구조와 콘텐츠를 표현하는 API 집합이며, BOM은 웹 브라우저와 관련된 기능을 제공하는 API 집합이다.
결국 DOM과 BOM에서 제공하는 API를 이용해 JS로 브라우저의 요소를 동적으로 조작한다고 볼 수 있다.
완벽하진 않아도 개념에 대해선 어느정도 이해를 했으니 다음 포스팅에선 본격적으로 Excution Context에 대해서 작성해보겠다.
참고
https://javascript.info/browser-environment
https://yeji-power.tistory.com/36
https://enjoydev.life/blog/frontend/1-dom