[Javascript] DOM의 정보와 Javascript 스펙을 가지는 window 객체 알아보기

브라우저는 서버에서 받은 html, CSS는 랜더링 엔진을 사용해서 화면에 표시합니다. Javascript는 랜더링 엔진에서 해석하지 않고, Javascript 엔진으로 처리합니다. 

 

화면에 표시된 요소를 조작하는 이벤트를 발생시키는 건 Javascript입니다. 이 Javascript는 DOM을 조작하고 다시 랜더링을 일으킵니다. 그니까, DOM을 조작하기 위해서 브라우저는 Javascript를 사용하는 것입니다. 그래서 개발자가 DOM을 조작하기 위한 정의를 내리기 위해서 Javascript를 사용합니다.

브라우저에서 사용하는 Javascript에서 DOM의 정보와 Javascript의 함수나 이벤트 함수 정보를 가지는 객체가 window 객체입니다.

 

아무 사이트에서 개발자 도구를 열고,  console.log(window) 를 입력하면 window객체를 확인할 수 있습니다.

Javascript스펙으로 Config, DomEvent, alert(), blur(), caches, clearInterval, close(), cookie등의 함수가 있는 걸 아래 그림에서 볼 수 있습니다.

window 객체는 브라우저 전체에 대한 객체이고, document 객체는 웹 페이지에 대한 전체적인 객체입니다.

window 객체 안에 document객체가 있습니다.

이것도 개발자 도구에서 볼 수 있습니다.

document 객체에 DOM의 요소들이 다 있으니까, querySelector나 className() 함수들을 사용할 수 있는 걸 알 수 있습니다.

window는 완전 조상 객체이기 때문에 생략하고 코드를 작성할 수 있습니다. 

그래서,  document.querySelector('.title') 처럼 저희는 쓰고 있습니다.

 

 

 

참고

Web API | MDN - Window