DOM, BOM, JS

위의 요소들은 앞으로 웹 개발 지식을 배울 때 자주 등장하는 개념입니다.
해당 요소들이 웹을 이루는데 어떤 역할을 하는지와 어떠한 특성이 있는지 배워보겠습니다.

먼저, 우리는 Window에 대해서 알아야 합니다.

Window

자바스크립트의 최상위 객체 / 전역 객체 / 모든 객체가 소속된 객체

window는 브라우저를 대변하고 이를 제어할 수 있는 메서드를 제공합니다.

브라우저를 대변한다니 이게 무슨 말일까요? window가 뭐하는 녀석인지 확인해 봐야겠습니다. 🧐

크롬에서 F12를 눌러서 개발자 모드 콘솔창에 this를 입력해봅시다.

콘솔에 this를 입력했더니 window 객체가 출력되었습니다.
js 개발에서 많이 사용했던 alert, clearTimeout 등의 메서드들이 보이네요!

아하, window가 브라우저를 대변한다는 말은
window는 브라우저 창을 의미하며 이 창을 제어하는 다양한 메서드들을 제공한다는 의미였습니다.

흥미로운 점은 this=window이기 때문에 window.clearTimeout()에서 window를 생략해서 사용할 수 있습니다.
그동안 우리가 사용했던 clearTimeout()은 사실 this.clearTimeout(), window.clearTimeout() 이었던 것이죠.

Okay!

지금까지 window는 브라우저 창을 의미하고 웹을 만들 때 사용하는 여러 메서드들을 가지고 있는 것을 파악했습니다!

그렇다면 브라우저를 의미하는 window는 어떻게 구성되어 있고 메서드들은 어디에 존재하는 걸까요?
브라우저 안에는 다양한 객체들이 트리형태로 구성되어 있는데, 이 중 window가 최상위에 위치하고 있습니다.

사실 저희가 배우고자 했던 DOM, BOM, JS는 window의 자식들입니다.
지금부터 각 요소들이 어떤 역할을 하는지 알아보겠습니다.

DOM(Document Object Model)

문서 객체 모델(DOM): 객체 지향 모델로써 구조화된 문서를 표현하는 방식

위 설명은 MDN에서 정의한 DOM의 정의입니다. 말이 꽤나 어렵죠? 🤯
쉽게 풀어보자면, DOM이란 HTML tag들을 브라우저가 이해할 수 있는 객체 형태로 구성한 것입니다.

브라우저는 안타깝게도 HTML의 tag들을 이해할 수 없습니다..
따라서 화면을 그리기 위해 HTML tag들을 브라우저가 이해할 수 있는 DOM tree 형태로 변경합니다.

DOM Tree의 객체 구성

앞으로 타입스크립트를 사용할 때, 우리는 객체의 타입을 설정해주어야 합니다.
예를 들어서 화면에 input 태그를 이용해야한다면 우리는 HTMLInputElement를 타입으로 설정합니다.

혹시 HTMLInputElement가 어디서 온 녀석인지 궁금하지 않으신가요?
네 사실 저도 딱히 궁금하진 않았습니다..

우리는 DOM Tree가 어떻게 구성 되어있는지 이해하는 것이 필요하니 예의상 궁금한척을 해주도록 하죠!

위의 트리를 따라가주면 최상위 객체는 Node이고 순서대로 Element, HTMLElement를 따라가는 것을 확인할 수 있습니다.

Okay!

여기서의 Node는 JS의 Node 객체를 뜻합니다.
즉, HTML의 Tag는 브라우저가 이해할 수 있는 형태인 JS Node 객체로 변환됩니다.

BOM(Browser Object Model)

브라우저 객체 모델(BOM): JS가 브라우저와 소통하기 위해 만들어진 모델

JS를 이용하면 브라우저의 정보에 접근하거나, 브라우저의 여러 기능들을 제어할 수 있습니다.
이 때 사용하는 객체 모델이 BOM입니다.

이름은 생소하지만 어떤 요소들이 있는지 알게되면 꽤나 친숙해보일 것입니다.

BOM 요소

JavaScript

마지막으로 다룰 개념은
프론트엔드 개발자와 애증의 관계인.. JavaScript입니다.

지금부터 JS가 브라우저에서 어떠한 역할을 하는지에 대해 알아보겠습니다!

JavaScript는 DOM, BOM 요소를 조작할 수 있기 때문에 화면을 동적으로 그리는 역할을 합니다.

앞서 배운 DOM, BOM을 반갑게 만나보면서 JS가 이들을 어떻게 조작하는지에 대해 살펴보겠습니다.

JS의 DOM 조작

// class명이 target인 요소 노드를 선택합니다.
const taget = document.querySelector('.target');

// target 노드의 className을 'non-target'으로 변경합니다.
target.className = 'non-target';

JS의 BOM 조작

// 현재 페이지를 새로고침 합니다.
window.location.reload(true);

// userAgent 속성을 이용해서 크롬 환경인지 아닌지를 확인합니다.
const userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf('chrome') > -1) {
  console.log('크롬이다!');
} else {
  console.log('크롬이 아니다...');
}

글을 마치며

지금까지 window, DOM, BOM, JS가 브라우저에서 어떠한 역할을 수행하는지 알아봤습니다.
자주 등장하는 개념들을 익힌 덕분에 앞으로 웹 개발에서 배울 내용들을 더 잘 이해할 수 있게 되었습니다!

그럼 다음 포스팅에서 뵙겠습니다.