Object Model

웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.

이 관계를 그림으로 나타내면 아래와 같다. (출처 : http://learn.javascript.ru/browser-environment)

JavaScript Core

JavaScript 언어 자체에 정의되어 있는 객체들. 생활코딩의 자바스크립트 수업과 사전에 정의된 객체가 여기에 속한다.

BOM

Browser Object Model. 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. 전역객체 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>

DOM

Document Object Model. 웹페이지의 내용을 제어한다. window의 프로퍼티인 document 프로퍼터에 할당된 Document 객체가 이러한 작업을 담당한다.

Document 객체의 프로퍼티는 문서 내의 주요 엘리먼트에 접근할 수 있는 객체를 제공한다.

<!DOCTYPE html>
<html>
<body>
    <img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/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-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<img src="https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png" />
	<script type="text/javascript">
		// body 객체
		console.log(document.getElementsByTagName('body')[0]);
		// 이미지 객체들의 리스트
		console.log(document.getElementsByTagName('body'));
	</script>
</body>
</html>

JavaScript Core

BOM

DOM

댓글