웹브라우저 JavaScript

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>

댓글

댓글 본문
작성자
비밀번호
  1. 유유
    감사합니다.
  2. 감사합니다~!
  3. hoho
    강의 감사드립니다~
  4. 감사합니다!
  5. 감사합니다.
  6. tachyon
    감사합니다
  7. AllenC
    감사합니다. 정말 아직 이해가 안가는 부분도 많지만 되도록 여러번 동영상 돌려 보면서 노트 정리도 하고 있습니다. 제가 더 노력한다면 엄청 도움이 많이 될 거 같아요. 이런 강의를 제공해 주셔서 정말 감사드립니다!
  8. yihsang
    많은 노력을 들여서 만드신 자료라는 것을 생각합니다.
    감사합니다.
  9. JustStudy
    2016.07.07목
    고맙습니다 3.
  10. JustStudy
    두 번째 학습하니까 더욱 확실하게 이해가 됩니다.
    고맙습니다 2.
  11. Rhys Jung
    어렵네요...
    언어쪽 JS를 사전에 보고 넘어가야 하나 고민중이네요
  12. fasdgoc
    감사합니다
  13. 강상모
    기초부터 탄탄히 내용 감사합니다!
  14. polaris75s
    최곱니다....
  15. 이주환
    2016. 04. 27
    잘보고 갑니다~!
  16. JustStudy
    고맙습니다
  17. 생명의 은인. 생활코딩
  18. arachi
    다시한번보니 이해가 잘되네요 감사합니다~!
  19. 호눅스
    잘 보고 갑니다.
  20. Cho Jeaho
    감사합니다.
  21. 모찌볼
    슬슬 긴장했는데 이해가 쉽게 도와주셔서 감사해요. 역시 한번에 이해할 수 있도록 여러번 다시 촬영하신다니 너무 감동적...ㅎ..... 고퀄리티 인것..
  22. Se-Young Ryu
    2016/01/28 11am
  23. 정동건
    굿
  24. 이고잉님짱
    오늘도 좋은강의 잘보고 갑니다!!!
    생활코딩은 진짜 인생 인강인듯....! 대단하십니다 이고잉님ㅠㅠㅠㅠ
  25. sugarui
    (너무너무 짜잘한건데) 마지막 예시에서 13행의 괄호안 태그네임은 body말고 image가 맞는거죠? :d
    늘 정말 감사합니다!!
  26. 무정블루스
    감사합니다. 다소 어렵군요.
  27. 코딩!
    내용이며 설명이며도 좋은데
    ppt자료도 정말 좋은것 같아요!
  28. kush
    몇번이고 녹화를 하셨다니 감사할 따름입니다 :)
  29. 아쿠아
    잘 보았습니다...^^
    언어==>javaScript==>모듈 까지 들고 듣는 중인데..이해가 되어서 기쁩니다.
  30. 머머
    어렵네. 갈무리 해놓았다가 나중에 다시한번 보기로.
  31. 심드렁
    몇달 전에 동영상 강의를 듣다가 오랜만에 다시 듣고 있습니다. 그 때는 무슨 의미인지 이해를 전혀 못했는데 이제야 조금씩 이해가 되네요. 감사합니다.
  32. 민재
    going 님이 국문학 전공이시라니 너무 반갑습니다. 수업 너무 잘듣고 있습니다. 정말 감사합니다~~~
  33. 수리
    정말 잘 보고 있습니다. 자바스크립트에 대해 이제야 공부하다니... 웹 쪽은 외울 것이 많아서 공부할 엄두가 안 났는데 중요한 부분만 집어 주셔서 유용하게 공부하고 있습니다. 감사합니다.^^
  34. 컹나
    잘봤습니다. 이제야가입을..! 지금부터라도 봤어요 누르려고요
  35. 감사합니다
  36. 고구미
    설명을 너무 잘 해주셔서 들으면 바로바로 이해되요! 감사합니다.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기