DOM이란?
DOM(Document Object Model)은 HTML 문서를 브라우저가 이해하고 자바스크립트로 조작할 수 있도록 객체(Object) 형태로 구조화한 모델이다.
HTML 요소들을 트리 형태로 구성하여 자바스크립트가 이 구조에 접근하고, 내용을 읽거나 수정하거나 삭제할 수 있게 만든 것이다.
- DOM은 프로그래밍 언어와 독립적으로 설계된 API를 기반으로 동작한다.
- 자바스크립트를 통해 DOM을 조작함으로써 웹페이지를 동적으로 제어할 수 있다.
DOM 트리란?
HTML 문서는 계층적인 구조를 가지고 있고, 브라우저는 이를 트리 형태의 객체 구조로 변환한다. 이 구조를 DOM 트리라고 부른다.
DOM 트리의 특징
- 각 HTML 요소는 노드(Node)로 표현된다.
- 노드들은 부모-자식 관계를 이루며 연결된다.
- 최상단의
<html>요소가 루트 노드(root node)가 된다.
주요 노드 종류
| 노드 타입 | 설명 |
|---|---|
| Element Node | <div>, <p> 같은 요소 노드 |
| Text Node | 텍스트(콘텐츠) |
| Attribute Node | class, id 등 속성 값 |
이러한 트리 구조 덕분에 특정 요소를 찾아내고, 삭제하거나 변경할 수 있다.
DOM API
자바스크립트는 다양한 DOM API를 통해 HTML 요소에 접근하고, 이를 조작할 수 있다.
1. 요소 선택하기
document.getElementById('myId')
document.querySelector('.my-class')
document.querySelectorAll('div > p')
getElementById,querySelector,querySelectorAll등은 DOM 트리에서 노드를 찾을 때 사용됩니다.
2. 속성 변경
const element = document.querySelector('#title')
element.textContent = '새로운 제목'
element.setAttribute('data-role', 'header')
textContent: 텍스트 변경setAttribute,getAttribute: HTML 속성 조작
3. 클래스 조작
element.classList.add('active') // 클래스 추가
element.classList.remove('hidden') // 클래스 제거
element.classList.toggle('on') // 클래스 토글
📍 예시:
버튼 클릭 시 'on' 클래스를 추가해서 스타일을 바꾸거나, 'hidden' 클래스를 제거해 요소를 보이게 만들 수 있다.
4. DOM 요소 생성/삽입/삭제
const newElement = document.createElement('div')
newElement.textContent = '새로운 요소'
// 삽입
document.body.appendChild(newElement)
// 삭제
document.body.removeChild(newElement)
❗removeChild()는 반드시 부모 요소가 자식 요소를 제거하는 형태여야 작동한다.
💻참고 사이트
안녕하세요:)