웹브라우저 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. 정말 이해가 어려운 부분이었는데 감사합니다 :-)
  4. 윤민수
    Dom.이 뭐지 뭐지 했는데, 여기서 완전히 알게 됐습니다 감사합니다 !
  5. 한창석
    오호~
    대화보기
    • 미완성
      20190108
    • JuicyFresh
      감사합니다.
    • wisdom_flower
      명쾌한 설명 감사합니당~
    • 코딩가즈아
      서적에서 보다가 DOM? BOM? 이게 뭐지했는데, 이렇게 간결하게라도 아니까 좀 낫네요. 감사합니다
    • 브베
      옥슬아 사랑해
      대화보기
      • SlowStarter
        감사합니다!
      • 옥슬이
        egoing의 노고에 감사드립니다
      • 스페이스몽키
        감사합니다~!
      • An TaeHyeon
        18-01-23 수강완료 !
        강의록 공유합니다.
        객체화
        https://goo.gl/Rgt3Fz
        DOM, BOM, JCORE
        https://goo.gl/MmBZSd
      • 복습중
        <오타> 중간에 프로퍼터 (x) -> 프로퍼티(o)
      • 박인호
        12-26
        수강완료.
      • GoldPenguin
        감사합니다.
      • Jayden贤宇
        질문 하나 하겠습니다

        window 객체 아래 세가지 프로퍼티(BOM, DOM, JavaScript core)로 나뉘어지고,
        세가지 프로퍼티가 다시 객체가 되서 아래 여러가지 프로퍼티로 나뉘지는거까지 이해했는데요
        이 전체 구조가 자바스크립트 언어에서 나눠지는 건가요? 아니면 자바스크립트코어가 자바스크립트 언어를 뜻하는건가요?
      • 바람과 나무
        감사합니다.
      • 수복
        자바를 알고 있어서 조금은 이해가 되었어요. 그런데 많이는 와닿지 않네요ㅠ.ㅠ
      • 신시내티
        자바스크립트의 코어(=객체: 함수, 날짜, 나열등)를 통해서
        DOM
        BOM 같은 브라우저의 요소들을 제어한다.

        근데 DOM, BOM 이 구체적으로 뭔지 아직 잘 모르겠어요. @.@
      • 프로그래밍초보
        저도 그렇게 생각했어요
        대화보기
        • Sangmook Kim
          170727 완료
        • Eunsim Kang
          마지막 console.log(document.getElementsByTagName('body')); 이 부분은
          console.log(document.getElementsByTagName('img'));로 바꿔야 할 거 같은데요.
        • crable
          감사합니다
        • 열공중
          좋은 강의 감사합니다.( _ _ )
          강의를 쭉~ 따라 가다가 도중에 헷갈려 버려서 이렇게 질문 남깁니다.

          DOM,BOM 객체랑 자바스크립트 객체가 헷갈립니다.

          DOM 객체등은 자바스크립트랑 별개인건가요?

          실습 예문을 보면 프라퍼티랑 메소드가 자바스크립트 객체인 것 같은데,
          동영상 설명을 보다보면 둘은 전혀 다른 것 같기도 하고...

          예문들에서 쓰이는 프라퍼티랑 메소드들은 자바스크립트에 의해서 만들어지는 자바스크립트 객체들인건지요?
          아니면 자바스크립트랑 상관없이 브라우저에서 해당페이지를 불러올때 브라우저가 만들어 내는 건지요?

          만약, 자바스크립트가 만들어 내는 객체가 아니라면 C++ 같은 다른 언어에서도 해당 객체를 불러올 수 있는건가요?
          또한, 자바스크립트가 아니라면 <script> 태크 밖에서도 사용할 수 있는건가요?

          잘 나가다가 헷갈려 버려서 헤매고 있습니다..ㅠ,.ㅠ
        • 코딩왕될래
          이해력없는 저도 이 강의 듣고 이해가 되네요. 감사합니다.
        • matheios
          감사합니다~ 이해력이 부족하여 여러번 봤음에도.. 어려운 것 같습니다....ㅠㅠ
        • 으노
          감사합니다
        • 심홍록
          이제야 좀 알거같다
        • 유유
          감사합니다.
        • 감사합니다~!
        • hoho
          강의 감사드립니다~
        • dhkim
          감사합니다!
        • hyuna
          감사합니다.
        • tachyon
          감사합니다
        • AllenC
          감사합니다. 정말 아직 이해가 안가는 부분도 많지만 되도록 여러번 동영상 돌려 보면서 노트 정리도 하고 있습니다. 제가 더 노력한다면 엄청 도움이 많이 될 거 같아요. 이런 강의를 제공해 주셔서 정말 감사드립니다!
        • yihsang
          많은 노력을 들여서 만드신 자료라는 것을 생각합니다.
          감사합니다.
        • JustStudy
          2016.07.07목
          고맙습니다 3.
        • JustStudy
          두 번째 학습하니까 더욱 확실하게 이해가 됩니다.
          고맙습니다 2.
        • Rhys Jung
          어렵네요...
          언어쪽 JS를 사전에 보고 넘어가야 하나 고민중이네요
        • fasdgoc
          감사합니다
        • 강상모
          기초부터 탄탄히 내용 감사합니다!
        • polaris75s
          최곱니다....
        • 이주환
          2016. 04. 27
          잘보고 갑니다~!
        • JustStudy
          고맙습니다
        • 생명의 은인. 생활코딩
        • arachi
          다시한번보니 이해가 잘되네요 감사합니다~!
        • 호눅스
          잘 보고 갑니다.
        • Cho Jeaho
          감사합니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기