DOM 그리고 Window 객체

Window 객체

window란 브라우저의 최상위 객체로 전역객체라고도 불린다.
그리고 브라우저화면이나 창을 컨트롤 할 수 있는 프로퍼티 및 메소드를 가지고 있다.
브라우저의 창 크기, 스크롤바 위치, 화면 구성 등등 모든 정보를 가지고 있는 객체이다.

사실 위의 내용이 window 객체의 전부이지만 약간의 tmi를 추가하자면, var로 선언하고 사용하는 변수나 메소드들은 전역 프로퍼티에 추가된다. 즉 window 객체의 프로퍼티가 된다.

하지만 let과 const의 경우 블록스코프에 할당되므로 window. 으로 접근이 불가능하다.

BOM

BOM(Browser Object Model)은 window 객체의 일부이며 창의 스크롤바, 브라우저의 history(뒤로 가기, 앞으로 가기 등) 등등의 내용을 담고있다.

Dom

DOM(Document Object Model)은 html 문서를 파싱하여 만든 object며 역시 window 객체의 일부이다.
Javascript는 브라우저 화면을 컨트롤하기 위해 나온 언어인데, 그러기 위해서는 화면이 javascript가 컨트롤 할 수 있는 모양으로 생겨야 한다.
하지만 화면은 html로 구성되어 있으므로 javascript가 이를 이해할 수가 없다. 때문에 브라우저는 이를 파싱해서 dom이란 이름의 object로 바꿔준다.

<div id="parent" class="my-class">
    <span id="child1">child</span>
    <span id="child2">child2</span>
</div>

예를 들어 위와 같은 html파일의 일부가 있을때, 이를 파싱하여 하나하나의 요소에 대해 아래와 같이 바꿔준 것이 바로 dom이다.

const child1 = {
    id: 'child1',
    nodeType: 1,
    nodeName: 'span',
    ...(그 외에 childNode, nextSibling, attribute 등등)
}

그리고 브라우저는 이를 tree 형태로 구성하는데 그것이 바로 dom tree다.

결론적으로 전체 도식도는 아래와 같다.

그림출처:https://cbw1030.tistory.com/46