DOM 조작
2025. 3. 30. 22:38ㆍWeb Development/JavaScript
DOM 조작
웹 페이지의 JavaScript에서 가장 강력한 기능 중 하나는 HTML 문서를 동적으로 조작할 수 있다는 것입니다. DOM(Document Object Model)은 HTML과 XML 문서를 위한 프로그래밍 인터페이스로, 웹 페이지의 내용, 구조, 스타일을 JavaScript로 접근하고 변경할 수 있게 해줍니다.
DOM이란?
Document Object Model의 이해
DOM은 웹 페이지의 프로그래밍 인터페이스로 다음과 같은 특징을 가집니다:
- 트리 구조: HTML 문서를 노드(node)라는 객체들의 트리로 표현
- 객체 지향적: 문서의 각 부분을 객체로 표현하여 접근
- 플랫폼/언어 독립적: 다양한 프로그래밍 언어에서 사용 가능
- 동적 접근: JavaScript로 실시간 페이지 업데이트 가능
DOM 트리 구조
HTML 문서는 DOM에서 다음과 같은 노드 유형들로 구성됩니다:
- 문서 노드(Document Node): 트리의 최상위 노드, 전체 문서를 나타냄
- 요소 노드(Element Node): HTML 태그 (예: <div>, <p>, <a> 등)
- 텍스트 노드(Text Node): 요소 내부의 텍스트
- 속성 노드(Attribute Node): 요소의 속성 (예: id, class, href 등)
- 주석 노드(Comment Node): HTML 주석
간단한 HTML 문서를 DOM 트리로 시각화하면 다음과 같습니다:
Document
│
└─ html
│
├─ head
│ │
│ └─ title
│ │
│ └─ "문서 제목" (텍스트 노드)
│
└─ body
│
├─ h1
│ │
│ └─ "제목" (텍스트 노드)
│
└─ p (속성: id="content")
│
└─ "텍스트 내용" (텍스트 노드)
DOM과 JavaScript
브라우저에서 JavaScript는 document 객체를 통해 DOM에 접근합니다. document는 웹 페이지의 모든 요소에 접근하는 시작점이 됩니다.
// document 객체는 전체 HTML 문서를 나타냄
console.log(document.doctype); // <!DOCTYPE html>
console.log(document.documentElement); // <html> 요소
console.log(document.head); // <head> 요소
console.log(document.body); // <body> 요소
console.log(document.title); // 문서 제목
console.log(document.URL); // 문서의 URL
DOM이란:
- 문서 객체 모델(Document Object Model)은 HTML 및 XML 문서를 위한 프로그래밍 인터페이스
- HTML 문서를 객체 트리로 표현하여 JavaScript로 접근하고 조작할 수 있게 함
'Web Development > JavaScript' 카테고리의 다른 글
| 이벤트 처리 (0) | 2025.03.30 |
|---|---|
| 요소 선택과 조작 (0) | 2025.03.30 |
| 배열 (0) | 2025.03.30 |
| 객체 (0) | 2025.03.30 |
| 함수 패턴 (0) | 2025.03.30 |