Object Model
자바스크립트를 통해서 브라우저를 제어하기 위해서는 자바스크립로 제어할 무엇인가가 준비되어야 한다. 그것이 바로 Object(객체)이다.
웹브라우저의 구성요소들은 하나 하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다.
이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.
자바스크립트로 브라우저를 제어하기 위해서는 객체를 제어한다.--> 객체화(자바스크립트로 브라우저를 제어하기 위해서는 모든 것이 객체화 되어 있어야 한다.)
브라우저 또는 웹페이지를 제어하기 위해서는 객체가 필요하고 그 객체를 만드는 주체는 웹브라우저가 준비하고 개발자는 준비된 그 객체를 자바스크립트를 통해서 웹브라우저 또는 문서를 제어할 수 있다.
이 관계를 그림으로 나타내면 아래와 같다.
1. window: 전역객체 또는 window(frame)을 제어하기 위한 객체
2. DOM(window.document): 웹 페이지에 있는 문서(태그<body>, <img> 등))를 제어한다.
3. BOM: 현재 이 웹브라우저가 가리키는 URL이나, 경고창을 띄운다거나 하는 등의 window 객체의 프로퍼티에 저장되어 있다.
4. JavaScriptCore: 자바스크립트라는 언어를 통해서 브라우저나, node.js, 구글 스프레시트 등의 다양한 호스트 환경을 제어할 수 있다. 그 호스트 환경이 무엇이든 간에 공통으로 사용할 수 있는 것이다.
--> 공통으로 사용할 수 있는 언어가 바로 JavaScriptCore이다.
ex.) node.js에서는 DOM이나 BOM이 적용되지 않는다.
1. BOM(Browser Object Model)
웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. 전역객체 Window의 프로퍼티(window.document 제외)에 속한 객체들이 이에 속한다.
BOM은 전역객체인 Window의 프로퍼티와 메소드들을 통해서 제어할 수 있다. 따라서 BOM은 Window 객체의 프로퍼티와 메소드의 사용법을 배우는 것이라고 해도 과언이 아닐 것이다.
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert(window.location)" value="alert(window.location)" />
<input type="button" onclick="window.open('bom.html')" value="window.open('bom.html')" />
</body>
</html>
2. DOM (Document Object Model)
웹페이지의 내용을 제어한다. window 객체의 프로퍼티인 document 프로퍼터에 할당된 Document 객체가 이러한 작업을 담당한다.
Window 객체가 창을 의미한다면 Document 객체는 윈도우에 로드된 문서를 의미한다고 할 수 있다.
Document 객체의 프로퍼티는 문서 내의 주요 엘리먼트에 접근할 수 있는 객체를 제공한다.
<!DOCTYPE html>
<html>
<body>
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<script>
// body 객체
console.log(document.body);
// 이미지 객체들의 리스트
console.log(document.images);
</script>
</body>
</html>
또한 특정한 엘리먼트의 객체를 획득할 수 있는 메소드도 제공한다.
<!DOCTYPE html>
<html>
<body>
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<img src="https://s3-ap-northeast-1.amazonaws.com/opentutorialsfile/course/94.png" />
<script type="text/javascript">
// body 객체
console.log(document.getElementsByTagName('body')[0]);
// 이미지 객체들의 리스트
console.log(document.getElementsByTagName('body'));
</script>
</body>
</html>
'WebFont-end > JavaScript' 카테고리의 다른 글
| [JavsScript] 제어 대상을 찾기 (0) | 2014.12.21 |
|---|---|
| [JavaScript] 전역객체 window (0) | 2014.12.21 |
| [JavaScript] arguments(유사 배열 객체) (0) | 2014.12.21 |
| [JavaScript] 클로저 (1) | 2014.12.21 |
| [JavaScript] 유효범위 (0) | 2014.12.21 |