# 브라우저 내장 객체
브라우저 내장 객체는 브라우저 환경에서 기본적으로 제공되는 객체들로, 웹 애플리케이션을 작성할 때 사용됩니다. 이 객체들은 DOM(Document Object Model), BOM(Browser Object Model), 그리고 웹 API를 통해 제공됩니다.
* window
- document
- navigator
- location
- history
- screen
## window
window 객체는 브라우저의 전역 객체로, 브라우저 창 또는 탭 자체를 나타냅니다.
모든 브라우저 환경에서 window는 최상위 객체로 존재하며, 전역 변수와 함수는 기본적으로 window 객체의 속성으로 등록됩니다.
```javascript
console.log(window); // window 객체 출력
console.log(window === this); // true (전역 컨텍스트에서는 this가 window를 참조)
```
* 브라우저 전역 객체 : 모든 브라우저에서 제공되며, DOM, BOM, 그리고 자바스크립트 핵심 기능을 포함합니다.
* 전역 변수와 함수 관리 : 전역으로 선언된 변수와 함수는 window 객체의 속성으로 자동 추가됩니다.
* 다양한 내장 메서드 및 속성 제공 : 사용자 상호작용, DOM 조작, 타이머 설정, 브라우저 제어 등을 수행할 수 있는 메서드와 속성을 제공합니다.
### 브라우저 정보
* window.navigator : 브라우저와 사용자의 정보 제공
* window.location : 현재 URL 정보와 관련된 작업을 수행
* window.history : 브라우저의 방문 기록을 제어
### 화면 및 디바이스 정보
* window.screen : 화면 해상도와 관련된 정보를 제공
* window.innerWidth / window.innerHeight : 브라우저 뷰포트(viewport)의 크기를 반환
* window.devicePixelRatio : 디바이스 픽셀 밀도를 나타냄
* window.scrollX / window.scrollY
### 사용자 상호작용
* window.alert() : 경고창을 표시
* window.confirm() : 확인 및 취소 버튼이 있는 대화 상자를 표시
* window.prompt() : 사용자로부터 입력을 받을 수 있는 대화 상자 표시
### 타이머 메서드
* window.setTimeout() : 일정 시간이 지난 후 함수를 실행
* window.setInterval() : 일정 시간 간격으로 함수를 반복 실행
* window.clearTimeout()
* window.clearInterval()
```javascript
window.setTimeout(() => {
console.log("3초 후 실행");
}, 3000);
```
```javascript
const intervalId = window.setInterval(() => {
console.log("1초마다 실행");
}, 1000);
// 5초 후 반복 종료
window.setTimeout(() => {
window.clearInterval(intervalId);
}, 5000);
```
### DOM 조작
* window.document : 현재 HTML 문서를 나타내는 객체로 DOM 조작의 핵심
### 이벤트 처리
* resize 이벤트 : 브라우저 창 크기 변경 시 실행
* scroll 이벤트 : 사용자가 페이지를 스크롤할 때 실행
* load 이벤트 : 페이지가 완전히 로드된 후 실행
```javascript
window.addEventListener("resize", () => {
console.log(`너비: ${window.innerWidth}, 높이: ${window.innerHeight}`);
});
window.addEventListener("scroll", () => {
console.log(`스크롤 위치: ${window.scrollY}`);
});
window.addEventListener("load", () => {
console.log("페이지가 로드되었습니다!");
});
```
## document
document 객체는 현재 HTML 문서를 나타내는 객체로, DOM(Document Object Model)을 통해 웹 페이지의 콘텐츠를 조작하고 구조에 접근할 수 있도록 합니다.
브라우저가 HTML 코드를 파싱하여 트리 형태로 변환한 DOM의 루트 객체이며, 자바스크립트를 사용하여 페이지를 동적으로 변경할 수 있게 합니다.
### HTML 요소 선택
* getElementById() : id 속성을 기준으로 특정 요소를 선택
* getElementsByClassName() : 클래스 이름을 기준으로 요소 집합을 선택
* getElementsByTagName() : 태그 이름을 기준으로 요소 집합을 선택
* querySelector() : CSS 선택자를 기반으로 첫 번째 요소를 선택
* querySelectorAll() : CSS 선택자를 기반으로 모든 요소를 선택
### 문서 정보 확인
* document.title : 문서의 제목을 반환하거나 수정
* document.URL : 현재 문서의 URL을 반환
* document.domain : 문서의 도메인을 반환
* document.lastModified : 문서가 마지막으로 수정된 날짜와 시간
### 콘텐츠 조작
* innerHTML : 요소의 HTML 콘텐츠를 가져오거나 설정
* textContent : 요소의 텍스트 콘텐츠를 가져오거나 설정
* createElement() : 새로운 HTML 요소를 생성
* appendChild() : 부모 요소에 자식 요소를 추가
* removeChild() : 특정 자식 요소를 제거
```javascript
const div = document.querySelector("#container");
div.innerHTML = "새로운 콘텐츠
";
const heading = document.querySelector("h1");
console.log(heading.textContent); // 텍스트 출력
heading.textContent = "새로운 텍스트"; // 텍스트 변경
const list = document.querySelector("ul");
const newItem = document.createElement("li");
newItem.textContent = "새 항목";
list.appendChild(newItem);
const firstItem = list.firstElementChild;
list.removeChild(firstItem);
```
### 문서 구조 탐색
* document.body : 문서의 `` 요소를 반환
* document.head : 문서의 `` 요소를 반환
* parentNode: 부모 노드
* childNodes: 자식 노드 리스트
* firstChild, lastChild: 첫 번째/마지막 자식 노드
* previousSibling, nextSibling: 이전/다음 형제 노드
```javascript
const container = document.getElementById("container");
console.log(container.parentNode); // 부모 노드
console.log(container.childNodes); // 자식 노드 리스트
const firstItem = document.querySelector("li");
console.log(firstItem.nextSibling); // 다음 형제 노드
console.log(firstItem.previousSibling); // 이전 형제 노드
```
### 클래스 조작
* classList : 요소의 클래스를 추가, 제거, 토글, 확인
```javascript
const element = document.querySelector("div");
element.classList.add("highlight"); // 클래스 추가
element.classList.remove("highlight"); // 클래스 제거
element.classList.toggle("hidden"); // 클래스 토글
console.log(element.classList.contains("hidden")); // 클래스 포함 여부
```
### 이벤트 처리
* addEventListener() : 요소에 이벤트 리스너를 추가
* removeEventListener() : 요소에서 이벤트 리스너를 제거
```javascript
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("버튼 클릭!");
});
```
### 폼 및 입력 요소
* forms : 문서의 모든 `