쫑가 과정

객체 모델 본문

JavaScript/공부

객체 모델

쫑가 2021. 8. 23. 13:23
 

브라우저 환경과 다양한 명세서

 

ko.javascript.info

 

window

두 가지 의미

1. 전역개체

window.document 와 window를 생략한 document는 같은 결과를 가져온다.

이유는 window를 생략하면 자동으로 윈도우 객체의 프로퍼티를 의미하기 때문.

2. window 또는 frame 것을 제어하기 위한 객체

여러 프로퍼티 중에서 아주 중요한 프로퍼티가 document

 

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>

 

저작자표시 비영리 변경금지

'JavaScript > 공부' 카테고리의 다른 글

forEach() / 주어진 함수를 배열 요소 각각에 실행하기  (0) 2021.09.07
=> / 화살표 함수 (arrow function expression)  (0) 2021.09.06
.map() / 배열 안에 함수 적용해 새로운 배열 생성  (0) 2021.09.06
intervals, timeout  (0) 2021.08.23
filter() / 배열 안에서 조건에 맞는 새로운 배열 만들기  (0) 2021.08.21
랜덤 숫자 (math.random) / .createElement() / 단락요소 생성  (0) 2021.08.21
local storage  (0) 2021.08.21
string과 veriable 조합 / ``(백틱)사용  (0) 2021.08.21
'JavaScript/공부' Related Articles more
Comments