-
[자바스크립트 객체 Javascript Object] 내장 객체, 브라우저 객체모델(BOM), 문서 객체모델(DOM)코딩은 주댕이로/JavaScript 2015. 9. 24. 22:07
자바스크립트의 객체는 크게
1. 내장 객체,
2. 브라우저 객체 모델(BOM:Browser Object Model),
3. 문서 객체 모델(DOM:Document Object Model) 로 나눌 수 있다.
***
내장 객체
내장 객체는 자바스크립트 엔진에 내장되어 있어, 필요한 경우 생성해 사용할 수 있습니다.
내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math)객체 등이 있습니다.
오늘 날씨가 며칠인지 알고 싶다면, Date 객체를 생성하여 getDate()를 사용하면 됩니다.
***
브라우저 객체 모델(BOM)
브라우저에 계층적으로 내장되어 있는 객체들을 브라우저 객체 모델(BOM:Browser Object Model)이라고 합니다.
브라우저 객체로는 window, screen, location, history, navigator 객체 등이 있습니다.
다음은 브라우저에 포함된 객체를 나타낸 것입니다.
브라우저(window)는 document, location의 상위 객체입니다.
예를 들어, 자바스크립트를 이용하여 현재 열린 사이트에서 다른 사이트로 이동시키려면,
다음과 같이 location 객체에 참조 주소(href) 속성을 바꾸면 됩니다.
window.location.href = "사이트 URL" → location.href = "사이트 URL"
여기에서 window 객체는 무시해도 됩니다.
***
문서 객체 모델(DOM)
문서 객체 모델(DOM:Document Object Model)이란 (X)HTML 문서 구조를 말합니다.
(X)HTML 문서의 기본 구조는 최상위 객체로 <html>이 있으며, 그 하위 객체로는 <head>와 <body>가 있습니다.
자바스크립트를 이용해 이미지의 src 속성을 바꾸고자 한다면, 지정된 <img>를 선택해 src 속성을 바꿔야 합니다.
이때 지정 요소를 잘 선택해 가져오려면 문서 객체의 구조를 잘 이해하고 있어야 합니다.
이렇게 문서 객체 모델에서는 (X)HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)을 적용할 수도 있습니다.
자바스크립트의 문서 객체 모델은 IE8 이하 버전에서 호환성이 떨어지기 때문에 사용이 힘들다는 단점이 있습니다.
그래서 최근에는 JQUERY 문서 객체 모델을 많이 사용합니다.
'코딩은 주댕이로 > JavaScript' 카테고리의 다른 글
[AngularJS] 조건문 4종류. ng-if,else,switch,ng-class등등!! (5) 2015.09.05 <script>와 <script type="text/javascript">의 차이는? (2) 2015.09.05
