본문 바로가기

공부를 합니다/언어 (Language)

웹브라우저 자바스크립트_4 Object Model

4. Object Model

JavaScript가 제어의 역할을 한다는 것은 JavaScript가 제어할 수 있는 '무언가'가 존재한다는 뜻이다. Object를 그 '무언가'로 생각하면 편하다.

  • Object Model: 브라우저와 웹 페이지의 여러 구성 요소들을 object로 만들어 제공하는 것.
  • 웹 페이지의 element를 JavaScript가 제어할 수 있도록 브라우저가 웹 페이지를 읽는 과정에서 element에 해당하는 object를 생성한다.

Example

/* <img> 태그를 제어할 수 있는 object 찾기 */

/* getElementByTagName을 이용하면 해당하는 Tag Element들을 list로 return */
var imgs = document.getElementByTagName('img');

/* 웹 페이지의 첫 ([0]) img태그의 width를 변경 */
imgs[0].style.width = '300px';

 

Object Model 분류


가장 큰 범주로 window Object가 있고 두 가지로 측면에서 볼 수 있다.

  • 웹 브라우저와 페이지를 제어하기 위한 object로 Documnet Object Model, Browser Object Model을 포함한다 (전역객체).
  • JavaScript 언어 자체적으로 window object를 갖는다.

 

DOM (Document Object Model)

  • window 객체의 여러 property중, document property (i.e window.document)에 저장된 object이다.
  • 웹 페이지 문서 내의 주요 element (e.g <body>), <img>등)을 제어한다.

BOM (Browser Object Model)

  • 웹 브라우저 자체와 관련된 element를 제어한다.
  • window 객체의 property중, navigator, screen, location 등이 해당된다.

JavaScript Core

  • JavaScript 언어 자체에 존재하는 object.
  • array, function 등을 포함한다.
  • 브라우저 host 환경에서만 존재하는 DOM, BOM과 다르게 어떤 host 환경에서도 사용 가능하다.