Browser 구조 분석

구성

Window는 화면 그 자체고,

Document는 우리가 HTML에서 작성한 요소들이 표기되어 지는 부분이다.

Navigator는 사용자 눈에는 안보이지만 브라우저 자체와 관련 된 정보가 담긴다

 

 

 

 

window 오브젝트

console.log(window)를 출력하면 윈도우와 관련 된 다양한 함수와 오브젝트, API를 확인할 수가 있다.

 

다시 한번 얘기하지만 window는 최고의 Object다! Global Object이다!

console.log(this); 출력했을 때도 window와 관련 된 내용이 출력된다.

 

윈도우 안에 alert라는 API가 있는데...

window.alert('hello')라고 쓰지 않아도, 그저 alert('hello')만 써도 작동이 된다. 글로벌 오브젝트이기 때문에 자동적으로 window를 써준다. window 생략이 가능하다.

 

window.navigator window안의 navigator라는 오브젝트 있는데 브라우저에 포함되어 있는 유용한 정보가 들어 있다. 블루투스, 클립보드, 인터넷 연결 상태, 키보드 연결 상태 등등

 

 

유용한 사이트

Document https://developer.mozilla.org/en-US/docs/Web/API/Document

 

Window https://developer.mozilla.org/en-US/docs/Web/API/Window

 

Viewport https://developer.mozilla.org/en-US/docs/Glossary/layout_viewport

 

Navigator https://developer.mozilla.org/en-US/docs/Web/API/Navigator

---

 

 

자바스크립트 배울 땐 DOM, BOM 이 두 모델을 이해하는 게 매우 중요하다.

DOM(Document Object Model)
- 문서에 대한 모든 내용을 담고 있는 객체
- 문서 즉 열러진 페이지에 대한 정보를 따로 오브젝트(객체화) 시켜서 관리함
- elements(요소) 접근해서 HTML 내용 조작가능 + CSS

BOM(Browser Object Model)
- 브라우저에 대한 모든 내용을 담고 있는 오브젝트
- 뒤로가기, 북마크, 즐겨찾기, 히스토리, URL정보 등
- * DOM, elements(요소)에 대한 접근 document.getElementByTagName(); document.getElementsById(); document.getElementsByClassName();