반응형
3. Object Model
웹브라우저의 구성요소들은 하나하나가 객체화되어 있다. 자바스크립트로 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화되어 있다. BOM과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.
var imgs = document.getElementsByTagName(‘img’);
imgs[0].style.width = ‘300px’; //width값을 바꿔줌.
window.document : DOM(Document Object Model)을 의미함
window.navigator : BOM(Browser Object Model)을 의미함
1) JavaScript Core
JavaScript 언어 자체에 정의되어 있는 객체들. 생활코딩의 자바스크립트 수업과 사전에 정의된 객체가 여기에 속한다.2) 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>
3) 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>
출처 : 생활코딩(https://www.opentutorials.org/)
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 생활코딩 javascript 정리 - 창제어(window 제어) (0) | 2017.06.28 |
|---|---|
| 생활코딩 javascript 정리 - Navigator 객체 (0) | 2017.06.25 |
| 생활코딩 javascript 정리 - 사용자와 커뮤니케이션하기 (0) | 2017.06.24 |
| 생활코딩 Javascript 정리 - Browser Object Model(BOM) (0) | 2017.06.18 |
| 생활코딩 Javascript 정리 - 자바스크립트 개념 및 HTML에서 자바스크립트 로드하기 (0) | 2017.06.17 |
| window.location 객체 (0) | 2016.05.05 |
| 자바스크립트 - apply와 call 차이점 (0) | 2015.02.03 |
| Javascript - jQuery Mobile 유틸리티 (0) | 2015.02.02 |