'개발/웹' 카테고리의 글 목록

개발/웹 +3

Loading..[Web] 웹 브라우저의 구조 (Window의 구조) [생활코딩]
2016.11.21

뷰어로 보기
Loading..HTML, CSS, JAVASCRIPT 공부하면서 정리
2016.10.14

뷰어로 보기
Loading..웹 개발 도움이되는 홈페이지1
2016.10.03

뷰어로 보기

[Web] 웹 브라우저의 구조 (Window의 구조) [생활코딩]

개발/웹2016. 11. 21. 12:45

뷰어
댓글로
이전글
다음글

(출처 : http://learn.javascript.ru/browser-environment)

Dom (다큐먼트 오브젝트 모델) - 문서를 제어 (가장 중요한 제어) ex) body, img .....

Bom (브라우져 오브젝트 모델)- 현재 웹브라우져가 가르키고있는 url 또는 표시하고있는 페이지 리로드, 경고창 띄우기 담당

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>