[Web] 웹 브라우저의 구조 (Window의 구조) [생활코딩]
개발/웹2016. 11. 21. 12:45
(출처 : http://learn.javascript.ru/browser-environment)
Dom (다큐먼트 오브젝트 모델) - 문서를 제어 (가장 중요한 제어) ex) body, img .....
Bom (브라우져 오브젝트 모델)- 현재 웹브라우져가 가르키고있는 url 또는 표시하고있는 페이지 리로드, 경고창 띄우기 담당
BOM
Browser Object Model. 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것이다. 전역객체 Window의 프로퍼티에 속한 객체들이 이에 속한다.
1 2 3 4 5 6 7 | <!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 객체의 프로퍼티는 문서 내의 주요 엘리먼트에 접근할 수 있는 객체를 제공한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html><body> <script> // body 객체 console.log(document.body); // 이미지 객체들의 리스트 console.log(document.images); </script></body></html> |
또한 특정한 엘러먼트의 객체를 획득할 수 있는 메소드도 제공한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html><html><body> <script type="text/javascript"> // body 객체 console.log(document.getElementsByTagName('body')[0]); // 이미지 객체들의 리스트 console.log(document.getElementsByTagName('body')); </script></body></html> |
(출처 : https://opentutorials.org/course/1375/6622)
'개발 > 웹' 카테고리의 다른 글
| HTML, CSS, JAVASCRIPT 공부하면서 정리 (0) | 2016.10.14 |
|---|---|
| 웹 개발 도움이되는 홈페이지 (1) | 2016.10.03 |
