BOM & DOM

BOM(Brower Object Model)

• 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다.  이를 통해서 브라우저의 새창을 열거나 뒤로 가기 등 다른문서로 이동하는 등의 기능들을 실행 시킬 수 있다.

• 전역객체로 window 가 있고 대표적인 하위객체로 location history navigator document screen 등이 있다. 이외 매우많다.

• window는 모든 객체의 조상으로서 window 관련 코드를 작성할 때에는 생략도 가능하다. (하지만 다른 함수와 헷갈리므로 명시하자)

• 심지어 개발자가 만든 javaScript 변수 또한 window 객체안에 들어간다.

 

var really = 'Really?'
window.really; // 'Really?'

 

 

 

Location

• location은 주소에 대한 정보를 알려주며 새로고침이나 현주소를 다른주소로 바꾸는 등의 역할을 한다. (다른 페이지 이동시 이전 페이지 기록이 남지는 않는다.

 

Navigator

• 브라우저나 운영체제와 같은 정보 = navigator.userAgent 가 담겨 있다.

• 휴대폰의 정보나 브라우저에 따라 다른 동작을 해야할 경우에 사용한다.

 

Screen

• 화면에 대한 정보를 알려줍니다.

• 너비, 높이, 픽셀, 컬러, 화면 방향, 작업표시줄을 제외한 너비와 높이(availWidth, availHeight) 등이 있으며 화면에 따라 다른 동작을 하게 하고 싶을 때 사용합니다. 

 

 

History

• 페이지 이동간 기록을 남겨 사용자가 앞으로가기 뒤로가기, 히스토리를 이용해서 몇개의 페이지로 뒤로 갈수 있는지 등의 정보가 있습니다.

 

history.replaceState(객체, 제목, 주소)

 

• 위 같이 페이지 이동없이 url 주소만 바꿔주기도 합니다.

 

Document

• 웹페이지 내부의 화면의 모든 구성요소가 들어있는 객체입니다.

 

 

---

DOM(Document Object Model)

• 웹 페이지를 프로그래밍 적으로 제어할 수 있게하는 객체 모델로서 최상위 인터페이스에는 Node가 있고 다음과 같은 구조이다.

 

• 위 트리를 보면 주석이나 텍스트 또한 포함되는 것을 알 수 있으며 실제 html코드를 아래와 같이 Live DOM Viewer를 통해서 보면

DOM의 트리구조를 볼 수 있다. 

• 이러한 DOM은 javaScript내에서 getElementById, getElementClass, querySelector 등과 같은 브라우저가 제공하는 DOM API를 사용하면 된다. 

• 또한 DOM은 BOM의 최상위 객체인 window 에 하위 객체로서 Document가 존재하여 포함된다.

 

 

---

참고

 

www.zerocho.com/category/JavaScript/post/573b321aa54b5e8427432946

(JavaScript) Window 객체와 BOM

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/frontend/bom-dom.md

baeharam/Must-Know-About-Frontend