웹브라우저 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. 주황버섯
    23.02.18 수강완료
  3. 헤밍웨이
    220825
    window 객체 아래
    DOM
    BOM
    JavaScript
    객체들

    앞으로 좀 더 구체적인 것들에 대해서 배울 예정
  4. 진진리
    0812
  5. 임앤강
    2022-02-06 수강완료~
  6. pmxsg
    2021.12.20. 수강
  7. 드림보이
    2021.12.15. Object Model 파트 수강완료
  8. 안젤라비
    21-11-26 (FRI)
  9. 경이
    211108 완료
    감사합니다
  10. labis98
    20210905 좋은 강의 감사합니다.
  11. 김동혁
    감사합니다 선생님
  12. 완벽한 설명이십니다 너무 맘에 드네요
  13. gkalsdlf
    egoing님 감사합니다!
  14. 감사합니다 ㅎㅎㅎ
  15. 박병진
    2020.12.01 완료
  16. 현미쓰
    11/16 복습 ㅎ.ㅎ
  17. 11/12
  18. nurunzii
    2020.08.31 완료
  19. anne
    완료
  20. 마준
    완료
  21. 정승옥
    완료
  22. 한강
    뼈대를 오늘 배웠네요. 감사합니다.
    Javascript core, DOM, BOM
    200623
  23. Kiki
    너무깔끔해요 헤매고 헤매다 결국 또 생활코딩에서 답을찾네요
  24. 쑤우
    완료. 감사합니다~
  25. Useok
  26. 얼그레이
    0219 감사합니다~
  27. tester
    // 이미지 객체들의 리스트
    console.log(document.getElementsByTagName('body'));
    body -> img 인 것 같습니다.
  28. 문병민
    완료!
  29. ㅎㅅㅁ
    다시시작 0114
  30. 2019-10-13 7:53pm 완료
  31. 정홍
    완료
  32. 류석현
    복습완료!
  33. 류석현
    이해가 안되는 부분이 많네요..ㅠ 한번더 보겠습니다!
  34. 정말 이해가 어려운 부분이었는데 감사합니다 :-)
  35. 윤민수
    Dom.이 뭐지 뭐지 했는데, 여기서 완전히 알게 됐습니다 감사합니다 !
  36. 한창석
    오호~
    대화보기
    • 미완성
      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)로 나뉘어지고,
        세가지 프로퍼티가 다시 객체가 되서 아래 여러가지 프로퍼티로 나뉘지는거까지 이해했는데요
        이 전체 구조가 자바스크립트 언어에서 나눠지는 건가요? 아니면 자바스크립트코어가 자바스크립트 언어를 뜻하는건가요?
      • 바람과 나무
        감사합니다.
      버전 관리
      egoing@gmail.com
      현재 버전
      선택 버전
      graphittie 자세히 보기