window, document 객체
웹 개발 과정에서 일상적으로 다뤄오던 window, document 객체는 웹 브라우저에서 JS로 웹 페이지를 제어할 수 있게 하는 객체이다.
- window
브라우저 창 전체를 대표하는 전역 객체로, 브라우저 환경에서 자바스크립트를 실행할 때, 최상위 컨텍스트로 사용된다.
웹 브라우저의 전체 창을 나타내며, 전역 범위에서 접근 가능하고 브라우저 기능을 제어 가능하다.
window.alert('Hello!');
window.setTimeout(() => console.log('2초 후'), 2000);
console.log(window.innerWidth);
일상적으로 사용하던 alert()와 같은 메서드나 객체는 wnidow객체를 생략하고 사용하는 것이다.
- document
현제 웹 페이지(HTML 문서) 자체를 나타내는 것으로, 위 window 객체의 하위 객체(프로퍼티)이다. 따라서 window.document로 접근 가능하나 일반적으로 생략하여 사용한다. 또한 DOM의 시작점으로 후술 할 DOM 트리의 루트 객체가 된다.
const title = document.querySelector('h1');
title.textContent = '변경된 제목';
document.body.style.backgroundColor = 'black';
이 외에도 document.write() 등의 메서드나 객체들은 전부 document 객체를 사용하는 것이다.
DOM이란?
자바스크립트와 같은 프로그래밍 언어가 HTML에 접근하기 위해선 HTML문서를 객체로 만들어야 한다.
이때 사용되는 객체 모델이 Document Object Model, 이하 DOM은 웹 문서의 구조화된 표현을 의미하며 HTMl 문서의 구조를 트리 형태의 객체 모델로 표현한 것이다. 이는 브라우저의 HTML 파서가 HTML 문서를 해석하며 생성하게 된다.
아래와 같은 간단한 HTML 코드가 있다고 하자.
<!DOCTYPE html>
<html>
<body>
<h1 id="title">Hello</h1>
</body>
</html>
위 HTML 코드를 브라우저는 바이트 단위로 받아들인 후, 문자 스트림으로 변환한다. 그 후 태그, 속성, 텍스트 노드 (위 코드에선 Hello) 종료 태그의 토큰을 생성한다. 이후 생성한 토큰을 기반으로 노드를 생성, 계층적으로 연결해 아래와 같은 DOM 트리를 구성하게 된다.
Document
└── html
└── body
└── h1 (id="title")
└── "Hello"
만약 head나 body 태그가 빠지는 등의 이유로 유효한 HTML문법이 아닐 때 브라우저의 HTML 파서는 올바르게 HTML을 교정하고 DOM 트리를 생성하며, display:none 속성을 가진 요소라 해도 포함한다는 특징이 존재한다.
위 상술한 내용을 간추려서 말하면 JS는 브라우저가 읽고 작업을 할 수 있는 도구, DOM은 일련의 작업이 이루어지는 장소가 되겠다.
DOM 접근 방법
우리는 웹 개발을 하면서 의식하지 않았을 뿐 DOM을 사용하여 처리하고 있었다.
- getElementById
- getElementsByClassName
- getElementsByTagName
- querySelector
위와 같은 document 객체 이후에 오는 대부분의 메서드나 속성이 DOM에 접근하는 것이다. 이렇게 DOM을 사용함으로써 개발자는 JS를 사용해 HTML에 접근하여, HTML 문서의 구조, 내용, 스타일 등에 동적으로 접근하고 이를 조작할 수 있다.
즉 최신의 동적 웹 페이지를 이해하고, 응용하기 위해선 DOM에 대한 이해가 우선되어야 한다
'Concept' 카테고리의 다른 글
| OAuth 2.0 Security Considerations (0) | 2025.10.10 |
|---|---|
| OAuth 2.0 (0) | 2025.10.10 |
| [Oracle Cloud] 오라클 클라우드 / 로그인부터 웹 서버 띄우기까지 (0) | 2025.04.01 |
| [JS] 자바스크립트 기본 개념 / 변수 선언 방식 (0) | 2025.03.26 |
| [JS] 자바스크립트 기본 개념 / 동기, 비동기 (2) | 2025.03.25 |