Javascript - document 와 window

서론

웹 브라우저는 Javascript에 객체의 형태로 BOM과 DOM을 제공해 주고 개발자는 이 객체를 이용해서 웹브라우저의 상태를 변화시킬 수 있습니다. 

그렇다면 BOM과 DOM은 무엇일까? 그리고 Javascript에서 window와 document의 차이는 무엇일까? 

본문에서는 웹브라우저에서 Javascript를 통해서 어떤 데이터들이 객체의 형태로 전달되는지 그 객체들을 이용해서 무엇을 할 수 있는지 알아보도록 합시다.

 

BOM(Browser Object Model)?

BOM은 웹 브라우저와 소통하기 위해 만들어진 객체모델입니다.

웹 브라우저의 창의 크기가 변경되거나, 스크롤이 움직이거나 이런 다양한 동작과 상태에 대한 정보를 표현하는 모델로서, 웹 브라우저에서 웹 페이지를 구동하기 위한 환경적 변수들을 담고 있습니다.

 

또 BOM은 window라는 객체명을 가지고 Javascript에서 접근이 가능합니다.

 

DOM(Document Object Model)

DOM은 웹 브라우저에서 문서를 구조적으로 표현하기 위해 만들어진 객체모델입니다.

웹 브라우저는 BOM의 환경적인 요소들을 토대로 DOM에 담긴 구조화된 문서를 랜더링 합니다.

 

또 DOM은 document라는 객체명을 가지고 Javascript에서 접근이 가능합니다.

 

BOM(window) > DOM(document) (포함 관계)

웹 브라우저에서 제공하는 Javascript에서 window객체 안에 document는 포함되어있습니다.

다시 말하자면 웹 브라우저 객체 안에 문서 객체가 존재합니다.

 

그림과 같이 window.document 와 document는 완전히 일치하는 것을 알 수 있습니다. 

이 말은 추상적인 개념 모델인 BOM과 DOM은 Javascript를 통해 객체의 형태 window와 document가 되며, window객체 안에 document가 포함되어 있다는 것을 알 수 있습니다.

 

Window객체

window객체를 살펴보면 수많은 속성과 메서드들이 존재하는 것을 알 수 있습니다.

사용자가 모두 알고 있는 것은 상당히 비효율적입니다. 

따라서 본문에서는 대표적인 몇 가지 window객체의 내용을 살펴보고 자세한 내용은 링크를 참조하세요.

 

window안에 포함되어있는 객체

가장 최상위 객체인 window는 다양한 객체들을 포함하고 있습니다. 그중 2가지는 기억하면 좋습니다.

• document - DOM에 대한 구현 객체
• screen - 말 그대로 화면 스크린 객체 (브라우저의 크기가 아닙니다. 모니터 스크린을 의미)

 

현재 브라우저의 크기

window 객체에서 브라우저의 크기를 알 수 있습니다.

• window.outerHeight - 웹 브라우저의 전체길이
• window.innerHeight - 웹 브라우저의 페이지가 보이는 곳의 길이
• window.innerWidth - 웹 브라우저의 폭
• window.screen.height - 화면의 길이
• window.screen.width - 화면의 폭

직접 웹 브라우저를 제어하면서 개발자 도구를 이용해서 상태를 확인해 보시면 좋습니다.

console.log('웹 브라우저 전체 길이 : ' + window.outerHeight);
console.log('웹 브라우저 페이지 뷰 길이 : ' + window.innerHeight);
console.log('웹 브라우저 폭 : ' + window.innerWidth);
console.log('화면 길이 : ' + window.screen.height);
console.log('화면 폭 : ' + window.screen.width);

 

Document 객체

window객체 안에 포함되어 있는 document 객체는 DOM을 구현한 객체입니다. 

개발자 도구에서 보면 Elements탭에 있는 문서 데이터가 바로 Document객체에 들어가 있습니다.

이 document객체에서 이 요소들에 접근하고 수정하고 추가하는 등 다양한 동작을 할 수 있습니다.

 

window.document 와 document는 같습니다.!

 

몇 가지 간단한 예제를 살펴보면서 포스트를 마치겠습니다.

더 자세히 document를 살펴보고 싶다면 여기!

 

선택자를 통한 요소 가지고 오기

해당 객체와 선택자를 이용해서 요소를 가지고 올 수 있습니다. 변수에 담는 것 또한 가능합니다.

//document에서 h1~h4 태그 가지고 오기
const Htags = document.querySelectorAll('h1,h2,h3,h4');

//document에서 특정 id를 가지고 태그 가지고오기
const Htag_Article = document.querySelector('.main');

 

요소에 속성 값 부여하기

요소를 가지고 온 후, 속성 값을 부여할 수 있습니다. 

속성 값은 객체의 속성에 접근하는 방식처럼 사용 가능합니다.

//아이디 속성
Htags[0].id = 'first htags';

//스타일 속성
Htags[0].style = 'background-color: blue';

 

요소의 태그 이름 접근

Htags[0].tagName

 

요소 안의 HTML 데이터 접근

Htags[0].innerHTML

요소 안의 Text 데이터 접근

Htags[0].innerText