[Javascript] Window, DOM, BOM이란?

나는 자바스크립트 언어를 Window, DOM, BOM이 정확히 무엇을 의미하는지도 모른채 사용해왔다.

사실 Window, DOM과 BOM을 이해하기 위해 과거에 여러 문서를 보고 구글링도 했었지만 와닿지가 않았고 붕 뜬 느낌이었다.

분명 이 글을 보고 있는 사람들 중에서도 나와 같은 경험을 한 사람들이 있을 것이다.

이런 사람들이 내 글을 보고 위의 개념들을 이해하는데 도움이 됐으면 한다. ('객체'라는 의미는 알고있다고 가정한다)

---

Window 객체

Window 객체는 자바스크립트의 최상위객체이자 전역객체이면서 모든 객체가 소속된 객체이다.

아래의 사진을 보면 DOM, BOM, JavaScript가 최상위 객체인 Window 객체 밑에 소속이 되어있다.

이 객체들은 서로 계층적인 관계로 구조화 되어있다.

Window객체와의 관계

위 사진에서 DOM, BOM, 그리고 JavaScript를 볼 수 있는데 JavaScript는 JavScript Core라고도 한다.

DOM과 BOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.

DOM, BOM을 알아보기 전에 개발자 도구에서 window를 출력해보자.

크롬 개발자도구(F12 또는 Ctrl+Shift+J)를 켜서 window를 치면 다음과 같이 콘솔에 출력이 된다.

 

 

사진을 보면 window객체는 객체화된 수 많은 구성 요소들로 이루어져 있다.

자바스크립트로 이 객체들을 제어해서 웹 브라우저를 제어할 수 있게 되는 것이다. '제어'의 의미는 아래에서 살펴볼 것이다.

 

 

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

DOM의 사전적 정의를 검색하면 다음과 같이 검색된다.

문서 객체 모델(DOM; Document Object Model)은 객체지향 모델로써 구조화된 문서를 표현하는 형식이다.

사전적 정의만 봤을 때 전혀 이해를 할 수 없었기 때문에 최대한 이해하기 쉽게 정리해보았다.

 

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 쉽게 말하면, 우리가 어떤 이미지를 홈페이지에 올린다고 할 때 body 내부에 img 태그를 걸어서 src 경로를 붙여넣어야 브라우저가 인식을 제대로 한다는 것이다. 제멋대로 태그들의 순서를 바꿔서 코드를 작성하면 브라우저가 그 코드를 인식을 못한다. 

여기서 브라우저가 웹 문서를 이해할 수 있도록 구성된 것을 DOM이라고 한다.

즉, 모든 요소들과의 관계를 부자 관계로 표현할 수 있는 트리 구조로 구성한 것이 DOM이다.

이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있다. 아래 예시를 보자.

 

---

test.html을 만들고 happy 사진을 넣고 화면을 띄워보면 아래와 같이 뜬다.

트리구조로 되어있다. 

test.html 화면

 

이 때 크롬개발자 도구를 열어서 Elements탭을 보자.

 

우리는 happy 이미지를 자바스크립트를 통해 제어해보도록 하자.

자바스크립트를 통해 이미지를 제어하기 위해서는 이미지 태그(<img>)가 자바스크립트로 제어가 가능한 형태여야 하는데 이는 곧 객체(Object)인 형태를 의미한다.

 

웹 브라우저는 알아서 각각의 태그마다 일대일로 객체를 만들어놓고 준비를 하기 때문에 우리는 이미 만들어진 태그에 해당되는 객체를 찾아서 객체를 대상으로 어떠한 메서드를 호출 한다거나 프로퍼티 값을 가져온다거나 이런식으로 객체를 제어할 수 있다.

 

happy라는 이미지를 제어하기 위해 document.getElementsByTagName('img')를 사용할 수 있다.

getElementsByTagName은 document 객체에 있는 메서드이다. 메서드를 통해 happy 이미지를 제어할 수 있는 것이다.

그런데 getElementsByTagName에 보면 Elements 로 복수형이 써있다. 이것은 img 태그를 한 개만 선택하는 것이 아니라 모든 img 태그를 선택한다는 뜻이다. 따라서 리턴 값은 배열이 된다.

 

imgs 

개발자도구 탭에서 imgs를 콘솔로 찍어보면  위의 사진처럼 출력이 된다.

지금 예시로 들었던 test.html 에서는 이미지가 한 개("happy.jpg")밖에 없기 때문에 0번방이 끝이고 length도 1이다.

 

이러한 위의 내용을 통해 DOM의 구성과 사용법을 간단히 알아보았다.

---

DOM은 Window 객체의 하위객체이기 때문에 개발자도구에서 window.document로 접근을 할 수 있다.

document 객체

그러나 window.document에서 window를 생략하고 document로도 접근을 할 수 있다.

document 객체

위의 예시에서 사용했던 document.getElementsByTagName도 이런 방식으로 사용한 것이다.

document.getElementsByTagName

---

아래 사진은 DOM 트리구조의 도식화이다.

뉴렉처 자바스크립트 강의 28강 6분대 참고

 

돔 트리구조에서 노드는 9종류로 이루어져 있는데 주로 쓰이는 노드는 4종류이다.

다음과 같다.

문서노드(Document Node)	트리의 최상위에 존재하며 각각의 하위요소들(엘리먼트, 어트리뷰트, 텍스트 노드)에 접근하려면 문서노드를 통해야 한다. 즉, 시작점이다.
요소노드(Element Node)	쉽게 말해 태그이다. <p> <div> <span> 등..
어트리뷰트노드(Attribute Node)	<input> 태그 안에는 name, value 등의 속성을 사용할 수 있는데 이러한 속성들을 가리키는 노드이다.
텍스트 노드(Text Node)	태그 내 텍스트를 표현한다. 텍스트 노드는 엘리먼드 노드의 자식이며 자신의 자식 노드를 가질 수 없기 때문에 돔 트리의 최종단이다. <span>안녕</span>일 경우 텍스트 노드는 '안녕'이다.

---

BOM(Browser Object Model) : 브라우저 객체 

BOM은 자바스크립트가 브라우저와 소통하기 위해서 만들어진 모델이다.

공식 표준은 아니지만 브라우저 대부분이 자바스크립트와의 상호작용에 있어서 비슷한 메소드와 속성으로 동작하기에 이와 같은 메소드들을 통칭하여 BOM이라고 한다. window 객체를 통해 접근이 가능하다.

navigator	브라우저명과 버전정보를 속성으로 가짐
window	최상위 객체로, 각 프레임별로 하나씩 존재
document	현재 문서에 대한 정보
location	현재 URL에 대한 정보 브라우저에서 사용자가 요청하는 URL
history	현재의 브라우저가 접근했던 URL history
screen	브라우저의 외부환경에 대한 정보를 제공