Object Model(DOM, BOM)

* Javascript를 시작하기에 앞서서 Object Model을 알고가면 좋은 것같아서 글을 남깁니다.

웹브라우저의 구성요소들은 하나하나가 객체화되어 있습니다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있으며, 이 객체들은 서로 계층적인 관계로 구조화되어 있습니다. 

큰 틀에서 보자면 DOM(Document Object Model)과 BOM(Browser Object Model)로 분류할 수 있습니다. 그 나머지는 JavaScript Core입니다.

이러한 DOM과 BOM은 window 객체의 하나의 속성이며, 브라우저 환경에서만 사용할 수 있는 property입니다.

 그렇다면,

window 객체란 무엇인가?

- window 객체는 모든 브라우저로부터 지원받으며 즉, 브라우저의 window를 말한다. 

  즉, 브라우저 전체를 담당하는 객체를 말합니다.

- 모든 전역(global) 객체, 함수(함수역시 객체), window 객체의 멤버입니다.

- 전역(global) 변수는 window 객체의 속성이 되고 전역 함수는 window 객체의 함수가 됩니다.

- window는 모든 객체의 조상이므로, 이 말은 모든 객체를 다 포함하고 있기 때문에 window는 생략가능하고 바로 함수 호출이 가능합니다.

  또한, 사용자가 만들었던 변수들(지역변수제외)도 모두 window 객체 안에 등록됩니다.

window의 대표적인 함수 몇 가지만...

- window.close();

위에서 설명한것과 같이 그냥 바로 함수를 호출하셔도 됩니다.  close();

ex) 하지만 window.close()함수는 그냥 닫는 것이 아니라, window.open()이라는 함수를 통해서 새로운 창을 만들었을 때 그 창에 대해서 닫을 수 있습니다.

현재 브라우저의 창을 닫습니다.

- window.open();

새 창을 엽니다. 이 때는 인자값을 줘서 팝업 창의 형태로 열 수 도 있으며, 현재 탭에서 열지를 그 외의 새창에 대한 설정을 할 수 있습니다.

- window.setTimeout(함수, 밀리초)

몇 초뒤에 해당함수를 실행시킬 때 사용하는 함수입니다.

- window.setInterval(함수, 밀리초)

정의한 초만큼 반복적으로 해당함수를 실행할 때 사용합니다.

하지만 setInterval함수와 setTimeout은 무한히 반복하거나 해당초안에 계속 실행하는 함수이기 때문에

 자신이 원할 때는 멈추는 기능이 필요할 수 있습니다.

이러할 때 사용하는 함수는 clearInterval(변수), clearTimeout(변수)입니다. 사용볍은 변수에 setInterval함수와 setTimeout함수를 저장한 뒤에

clearTimeout(변수명)을 적어서 호출하면 됩니다.

ex) var stopSetInterval = setInteval(function() { }, 3000);

     clearInterval(stopSetInteval);

- window.getComputedStyle(태그)

현재 적용된 태그의 스타일을 찾는 메소드입니다. 즉, 속성값을 알 수 있습니다.

ex) getComputedStyle(document.getElementById('btStyle'));

이제 window 객체에 속한  DOM(문서 객체 모델)과 BOM(브라우저 객체모델)을 알아 봅시다.

DOM 이란?

문서 객체 모델(DOM)은 HTML, XML 문서의 프로그래밍 interface 입니다.

즉. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해서 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도움을 줍니다. ( 즉, 태그들 body, img 등의 태그들을 제어하는 역할을 합니다. )

DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 Object로써 문서를 표현합니다.

또한, 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할(interface) 역할을 담당합니다.

- DOM 은 웹 페이지의 객체 지향 표현이며, 자바스립트 언어를 이용해 DOM 을 수정할 수 있다.

- DOM 은 브라우저환경에 따라 다르게 동작할 수 있다는 사실을 인지하고 있어야 됩니다.

BOM 이란?

브라우저 객체 모델(BOM)은 자바스크립트가 브라우저와의 소통하기 위해서 만들어진 모델입니다.

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

이 BOM은 웹 브라우저 창을 관리할 목적으로 제공되는 객체 모음을 대상으로 하는 모델이므로, 자바 스크립트 등에서 사용가능합니다.

브라우저 제작사 마다 세부사항이 다르므로 확인후 사용합니다. 또한, 운영체제에 대한 정보도 가지고 있습니다.

역할  - 웹브라우저 윈도우 및 웹 페이지의 일부분을 제어할 수 있는 윈도우 객체 모델이다.