[JavaScript] Window, DOM, BOM

# Window

인터넷 브라우저를 보면 주소창, 탭, 툴바 등과 같은 기능들이 구성되어 있다.

이후 화면에 비추는 것이 웹 사이트로 여기서 브라우저 전체를 담당하는 것이 Window 객체이고, 웹 사이트만 담당하는 것이 Document 객체라고 이해하면 쉽다.

window 아래에는 다양한 객체들이 있는데 대표적으로 screen, location, history, document 등이 있고 메서드에는 parseInt, isNaN 등이 있다.

실제 parseInt 메서드를 쓸 때 window.parseInt()라고 대부분 사용하지 않고 parseInt()로만 사용해도 실행이 된다.

그 이유는 사실 window 객체는 모든 객체의 조상으로 전역객체이며, 모든 객체를 다 포함하고 있기 때문에 window는 생략 가능하기 때문이다.

 

# DOM

DOM이란 Document Object Model의 약어로, document를 객체로 구현화한 의미랑 비슷하다.

페이지 검사(F12)를 눌러 Elements 탭을 보면 HTML의 계층적 구조가 나온다.

이러한 웹 사이트 구조를 객체로 표현하자면 아래와 같다.

{
  document: {
    html: {
      head: {
        title: ...
      },
      body: {
        header: ...
      }
    }
  }
}

DOM은 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다.

💡 웹 페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 독립적인 인터페이스이다.

 

# BOM

document는 따로 DOM이라고 불리고 나머지는 브라우저에 대한 정보를 가지고 있어서 BOM(Browser Object Model)이라고 불린다.

 

navigator :

• 브라우저나, 운영체제(OS) 대한 정보가 있다 (navigator.userAgent).
• userAgent 정보를 바탕으로 분석 사이트에서는 고객에 대한 정보를 분석한다.

screen :

• 화면에 대한 정보를 알려준다. (width, height, pixelDepth, colorDepth, orientation …)
• 화면 크기에 따라 다른 동작을 하고 싶을 때 사용한다.

location :

• 주소에 대한 정보를 알려준다 (protocol, host, hostname, pathname, href, port, search, hash 속성을 이용).

history :

• 앞으로 가기 (history.forward 또는 history.go(1))
• 뒤로 가기 (history.back() 또는 history.go(-1))
• 히스토리 간에 이동 (history.go(페이지수))
• 뒤로 가기 할 수 있는 페이지의 개수 (history.length)