`document` 객체는 웹 개발에서 매우 중요한 개념으로, 특히 JavaScript에서 DOM(Document Object Model)을 조작하는데 사용됩니다. 웹 페이지는 HTML로 구성되어 있으며, 브라우저는 이 HTML 문서를 로드하여 트리 구조로 표현된 DOM을 생성합니다. 이 DOM은 웹 페이지의 구조와 콘텐츠를 프로그래밍적으로 접근하고 조작할 수 있는 방법을 제공합니다. `document` 객체는 이 DOM을 표현하고 관리하는 중심 역할을 하며, HTML 페이지 전체를 나타냅니다.
## DOM(Document Object Model)의 개념
DOM은 HTML 문서를 트리 구조로 변환하여 각 요소를 객체로 표현한 모델입니다. HTML 문서의 각 요소는 DOM에서 노드(node)라고 불리며, 이 노드는 부모 노드, 자식 노드, 형제 노드와 같은 계층적 관계를 가집니다. DOM 트리는 HTML 문서의 각 요소를 접근하고 조작할 수 있는 방법을 제공하며, JavaScript에서 DOM 트리를 조작할 때 핵심적으로 사용되는 객체가 바로 `document`입니다.
DOM은 크게 4가지 노드 타입으로 구성됩니다:
1. **문서 노드(Document Node)**: DOM 트리의 최상위 노드로, `document` 객체를 의미합니다.
2. **요소 노드(Element Node)**: HTML 태그 하나하나를 의미하며, 예를 들어 `<div>` 또는 `<p>` 태그 같은 요소들이 이에 해당됩니다.
3. **텍스트 노드(Text Node)**: 요소 내의 텍스트 콘텐츠를 나타내며, HTML 요소 안에 포함된 텍스트 부분입니다.
4. **속성 노드(Attribute Node)**: HTML 요소의 속성(예: `class`, `id`, `href`)을 나타냅니다.
이러한 DOM 트리를 프로그래밍적으로 제어하기 위해 JavaScript는 다양한 API를 제공하며, 그 중에서 가장 중요한 객체가 바로 `document`입니다.
## `document` 객체의 역할
`document` 객체는 현재 로드된 웹 페이지, 즉 HTML 문서를 표현하는 객체로서, HTML 요소에 접근하고 조작하는 데 필요한 다양한 프로퍼티와 메서드를 제공합니다. JavaScript에서 `document` 객체를 사용하면 페이지의 텍스트, 이미지, 링크, 폼 등 모든 HTML 요소를 쉽게 다룰 수 있습니다. `document`는 브라우저에서 HTML 문서를 파싱할 때 자동으로 생성되며, 페이지의 생명 주기 동안 지속적으로 접근할 수 있습니다.
### 주요 프로퍼티 및 메서드
1. **`document.documentElement`**:
- 현재 HTML 문서의 최상위 요소인 `<html>` 태그에 접근할 수 있습니다.
- DOM에서 루트 요소는 `document.documentElement`를 통해 접근할 수 있습니다.
2. **`document.body`**:
- `<body>` 태그에 접근하는 데 사용됩니다. 페이지의 본문 요소로, 대부분의 콘텐츠가 포함된 영역입니다.
3. **`document.head`**:
- `<head>` 태그에 접근하는데 사용됩니다. `<meta>`, `<link>`, `<title>`과 같은 메타데이터나 스타일, 스크립트 정보를 담고 있는 부분입니다.
4. **`document.title`**:
- 현재 문서의 제목을 나타냅니다. HTML의 `<title>` 태그에 들어가는 값을 설정하거나 가져올 수 있습니다.
```javascript
console.log(document.title); // 현재 문서의 제목 출력
document.title = "새로운 제목"; // 문서 제목을 변경
```
5. **`document.URL`**:
- 현재 문서의 URL을 나타냅니다. 페이지의 URL 정보를 가져올 때 사용됩니다.
```javascript
console.log(document.URL); // 현재 페이지의 URL 출력
```
6. **`document.getElementById()`**:
- 주어진 `id` 속성을 가진 요소를 선택하는 메서드입니다. 이는 웹 페이지에서 특정 요소를 빠르게 찾을 수 있는 가장 일반적인 방법입니다.
```javascript
const element = document.getElementById('myId');
```
7. **`document.getElementsByClassName()`**:
- 주어진 클래스 이름을 가진 모든 요소를 선택하는 메서드입니다. 반환 값은 유사 배열 객체(HTMLCollection)로, 여러 요소를 반환할 수 있습니다.
```javascript
const elements = document.getElementsByClassName('myClass');
```
8. **`document.getElementsByTagName()`**:
- 주어진 태그 이름을 가진 모든 요소를 선택합니다. 예를 들어, 모든 `<div>` 태그를 선택할 수 있습니다.
```javascript
const divs = document.getElementsByTagName('div');
```
9. **`document.querySelector()`**:
- CSS 선택자를 사용하여 문서에서 첫 번째로 일치하는 요소를 선택합니다. 매우 유연한 방식으로 원하는 요소를 선택할 수 있어 최근에 자주 사용됩니다.
```javascript
const firstDiv = document.querySelector('div');
```
10. **`document.querySelectorAll()`**:
- 주어진 CSS 선택자에 일치하는 모든 요소를 NodeList로 반환합니다. 이는 `getElementsByClassName()`나 `getElementsByTagName()`보다 더 유연하게 요소를 선택할 수 있게 해줍니다.
```javascript
const divs = document.querySelectorAll('div');
```
### DOM 조작
`document` 객체를 사용하면 페이지의 요소를 동적으로 조작할 수 있습니다. 예를 들어, 요소의 내용을 변경하거나, 새로운 요소를 추가하고, 제거할 수 있습니다.
1. **내용 변경**: 특정 요소의 텍스트나 HTML 콘텐츠를 동적으로 변경할 수 있습니다.
```javascript
const element = document.getElementById('myId');
element.innerHTML = "<p>새로운 콘텐츠</p>"; // 요소의 HTML을 변경
element.textContent = "새로운 텍스트"; // 요소의 텍스트만 변경
```
2. **요소 생성 및 추가**: 새로운 HTML 요소를 동적으로 생성하고 페이지에 추가할 수 있습니다.
```javascript
const newElement = document.createElement('div'); // 새로운 div 요소 생성
newElement.textContent = "동적으로 추가된 요소";
document.body.appendChild(newElement); // body에 새로운 요소 추가
```
3. **요소 삭제**: 기존 요소를 DOM에서 제거할 수 있습니다.
```javascript
const element = document.getElementById('myId');
element.remove(); // 해당 요소 제거
```
4. **속성 조작**: HTML 요소의 속성도 동적으로 변경할 수 있습니다.
```javascript
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com'); // 링크의 href 속성을 변경
link.getAttribute('href'); // 속성 값 가져오기
link.removeAttribute('href'); // 속성 제거
```
### 이벤트 처리
`document` 객체는 이벤트 처리에서도 중요한 역할을 합니다. 예를 들어, 사용자가 버튼을 클릭했을 때 특정 동작을 실행하거나, 키보드를 누를 때 이벤트를 감지할 수 있습니다.
1. **`addEventListener()`**:
- 특정 이벤트를 감지하고, 그에 반응하여 함수를 실행할 수 있습니다.
```javascript
const button = document.querySelector('button');
button.addEventListener('click', function() {
alert('버튼이 클릭되었습니다!');
});
```
2. **DOMContentLoaded 이벤트**:
- `document` 객체의 특별한 이벤트 중 하나로, HTML 문서가 완전히 로드되고 파싱되었을 때 발생합니다. 모든 리소스(이미지, 스타일시트 등)가 로드되기를 기다리지 않고 HTML 구조만 완전히 파싱되면 실행됩니다.
```javascript
document.addEventListener('DOMContentLoaded', function() {
console.log('문서가 완전히 로드되었습니다.');
});
```
### `document` 객체의 응용
1. **동적 콘텐츠 생성**:
- `document` 객체를 사용하여 웹 페이지에 동적으로 콘텐츠를 추가할 수 있습니다. 예를 들어, 사용자가 폼을 제출하면 새로운 리스트 아이템을 생성하거나, Ajax 요청을 통해 서버에서 데이터를 받아와 페이지에 표시할 수 있습니다.
2. **SPA(Single Page Application)**:
- 많은 현대 웹 애플리케이션은 SPA 방식으로 개발되며, `document` 객체는 페이지 전환 없이 DOM을 동적으로 업데이트하는 데 사용됩니다. React나 Vue.js 같은 프레임워크에서도 결국 DOM을 직접적으로 조작하는 대신 가상 DOM을 사용하지만, 그 근본적인 작동 원리는 `document` 객체와 DOM 조작에 기반을 둡니다.
3. **유효성 검사 및 오류 처리**:
- `document` 객체를 사용하여 폼 유효성 검사를 수행하거나, 사용자가 입력한 데이터를 검증하고 적절한 피드백을 줄 수 있습니다.
## 결론
`document` 객체는 웹 개발에서 HTML 문서를 표현하고 조작하는 가장 중요한 객체입니다. 이를 통해 개발자는 동적으로 콘텐츠를 추가, 수정, 삭제하고, 사용자와의 상호작용을 처리할 수 있습니다.
'게으른 개발자의 끄적거림' 카테고리의 다른 글
| .gif파일이란? (개념, 장단점 등) (2) | 2024.11.04 |
|---|---|
| Java 예외(Exception) 처리 방법 (feat. throws, throw) (1) | 2024.10.28 |
| 프로시저(PROCEDURE)란? (0) | 2024.10.21 |
| .pdf파일이란? (1) | 2024.10.17 |
| 호스팅이란? (1) | 2024.10.16 |