[Js] Object Model | 객체화란? | Core | BOM | DOM

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

위 강의 중 기초적인 내용이나, 필요 지식 등의 내용은 따로 포스팅 하지 않겠습니다. (html, css, 실습 환경 등..)

---

 

Object Model 

웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다.

이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.

 

이 관계를 그림으로 나타내면 아래와 같다.

 

(출처 :  http://learn.javascript.ru/browser-environment )

 

 

쉽게 말하자면 Object Model은 큰 틀이라고 생각하면 된다.

자바스크립트로 브라우저를 제어하기 위해 객체를 만드는 것 이것을 "객체화"라고 한다.

 

예를 들어보자면, 웹 브라우저는 각 태그에 따라 객체로 만들고, 우리는 이를 제어하기 위해 그 객체를 찾아내어야 한다.

 

미리 준비된 객체 중에서 document라는 객체가 있고 이 객체는 getElementsByTagName()이라는 메소드를 가지고 있다.

 

태그 네임을 이용해서, 엘리먼트 객체를 가져온다 라는 뜻을 가진 이 메소드에 인자로 img를 주게 된다면,

img의 라는 태그의 이름을 가지고 있는 모든 엘리먼트를 가지고 와서 리턴해주게 되는 것이다.

 

여기서 중요한 것은 "모든"이다. 즉 복수형으로 값을 리턴해주기 때문에 배열의 형태를 띄게 된다.

 var imgs 라는 변수에 값을 담아오면 이를 배열의 형태로 리턴해주는 것이다. 

 

imgs[0] 이라고 하면 위 이미지 태그를 의미하는 "객체"가 된다.

그렇기 때문에 imgs[0].style이라고 하면, 위 태그 즉 imgs라는 객체가 가지고 있는 프로퍼티를 의미한다. 

여기서 style이라는 속성은 결국 img태그의 css를 의미하기 때문에 style.width로 값을 바꾸어 준다면, 실제 css가 변경되게 되는 것이다.

 

 

 

 

조금 큰 틀을 살펴보자.

 

맨 위에서 설명했던 계층적 모델 사진을 확인해보면 Window가 제일 상단에 위치한다.

 

Window 라는 객체는 크게 두가지의 의미를 가지는데, 첫 번째로는 전역객체,  두 번째로는 window와 frame과 같은 것들을 제어하기 위한 객체 라는 의미이다.

 

윈도우가 가진 중요한 속성 중 하나가 바로 document이고,  이 속성은 웹 페이지에 있는 문서(태그)를 제어하는 역할을 한다. 그래서 이를 Document Object Model 즉 DOM 이라고 부르는 것이다.

 

다음으로 Browser Object Model 즉 BOM은, 현재 이 웹페이지가 가르키고 있는 url을 알아낸다거나, 표시하는 페이지를 reload 하거나 경고창을 띄우거나 하는 역할을 한다.

이 객체 또한 Window객체의 프로퍼티이다.

 

마지막으론 JavaScript Core라는 것이 있는데, 호스트 환경이 무엇이던 간에 그것이 자바스크립트를 통해 제어하는 시스템이라면 공통적으로 가지고 있는 객체들이다.

 

앞서 설명한 DOM과  BOM 은 웹 브라우저에 맞추어진 객체이기 때문에 호스트 환경이 변한다면 (구글 앱스스토어나 node.js와 같은) 사용할 수가 없다. 하지만 javascript 는 모든 호스트 환경에서 사용할 수 있는 것이기 때문에 이것은 어디에서나 환경에 관계없이 동작한다.