DOM은 자바스크립트를 본격적으로 웹개발에 사용할 때 꼭 이해 해야할 개념이다.
1.0 ❓ DOM이 왜 필요할까?
HTML은 정적인 구조 이지만 웹 브라우저에서 자바스크립트를 사용 시 페이지를 동적으로 조작이 가능
- 웹페이지에 있는 텍스트를 바꾸고,
- 이미지를 교체하거나,
- 버튼을 누르면 뭔가 실행되게 만들고,
- 입력 폼 값을 확인하고,
- 페이지 요소를 숨기거나 나타냄
이런 식의 웹페이지 조작이 자바스크립트의 핵심 사용처.
비유
HTML: TV
DOM: 리모컨
자바스크립트: 리모컨을 조작 하는 손
1.1 DOM (Documetn Object Model) 이란?
HTML 문서를 브라우저가 읽고 구조화한 트리 형태의 객체 모델로 변환한 것.
- Document: 웹 페이지 하나를 의미
- Object: 각각의 태그가 객체로 변환됨
- Model: 문서의 구조를 모델로 표현한 것
즉 DOM은 HTML 을 자바스크립트가 조작이 가능하게 만든 문서 객체 모델
정리하자면:
HTML → 브라우저가 읽음 → DOM 구조로 변환 → JS가 조작
1.2 DOM의 형태(트리구조)
<!DOCTYPE html>
<html>
<body>
<h1>Hello</h1>
<p>Welcome to my site</p>
</body>
</html>
이러한 HTML 구조를
DOM 트리 구조로 아래 처럼 변경
Document
└── html
└── body
├── h1 (Hello)
└── p (Welcome to my site)
HTML 태그 하나하나가 **노드(Node)**라고 불리며,
DOM에서는 각각의 태그를 **객체(Object)**처럼 다룸.
1.3 DOM의 예제 텍스트 바꾸기
<!DOCTYPE html>
<html>
<body>
<p id="greeting">안녕하세요</p>
<button onclick="changeText()">클릭해보세요</button>
<script>
function changeText() {
document.getElementById("greeting").textContent = "반갑습니다!";
}
</script>
</body>
</html>
<코드 설명>
- document: 웹 문서를 의미하는 최상위 객체
- getElementById("desc") : id="desc" 를 가진 <p> 태그를 찾음
- textContent: HTML 태그의 내부 텍스트를 변경
1.4 DOM 의 예제들
| 조작 | 유형 설명 | 예시 코드 |
| 요소 선택 | 원하는 HTML 요소를 JS로 선택 | document.querySelector("h1") |
| 텍스트 변경 | 태그 안의 내용을 바꿈 | element.textContent = "새 글자" |
| 속성 변경 | 이미지의 src, 링크의 href 등 | img.src = "new.jpg" |
| 스타일 조작 | CSS 스타일을 변경 | div.style.backgroundColor = "yellow" |
| 클래스 조작 | class 추가/제거 | element.classList.add("active") |
| 이벤트 연결 | 클릭, 입력, 마우스 등 | button.addEventListener("click", fn) |
| 요소 생성 | 새로운 태그 만들기 | document.createElement("div") |
| 요소 추가/삭제 | 화면에 보여주거나 제거 | parent.appendChild(newElem)element.remove() |
1.5 DOM 조작이 중요한 이유?
- 버튼 누르면 설명창 뜨게하기
- 입력창에 따라 안내 메세지 보여주기
- 사용자 맞춤 정보 보여주기
- 동적으로 이미지 추가 및 삭제
이러한 기능들을 만들기 위해 DOM 은 필수적인 개념
1.6 자주 쓰는 DOM 객체 와 메서드 요약
객체 / 메서드 설명
| 객체 /메서드 | 설명 |
| document | HTML 문서를 대표하는 객체 |
| getElementById("id") | 특정 ID 요소 선택 |
| querySelector("선택자") | CSS 방식으로 요소 선택 |
| textContent, innerHTML | 텍스트 또는 HTML 조작 |
| style.속성 | 인라인 스타일 변경 |
| classList.add/remove/toggle | 클래스 추가/삭제/토글 |
| createElement("div") | 새 요소 생성 |
| appendChild() | 요소 추가 |
| remove() | 요소 삭제 |
| addEventListener() | 이벤트 감지 및 처리 |
예제를 붙이기에는 너무 길어 지는 느낌이 있어 다음 파트에 예제만 확인 해보자.
'프로그램 언어 > JavaScript Dom Part' 카테고리의 다른 글
| [J.S_DOM] 3. 요소의 내용/속성 변경하기 (textContent, innerHTML, setAttribute 등) (1) | 2025.08.08 |
|---|---|
| [J.S_DOM] 2-1. DOM 요소 선택 메서드 예제 (1) | 2025.08.08 |
| [J.S_DOM] 2. DOM 요소 선택하기 (getElementById, querySelector 등) (1) | 2025.08.08 |
| [J.S_DOM] 1-1. DOM이란? 예제 모음 (8) | 2025.08.08 |
| [J.S_DOM] INTRO. DOM (2) | 2025.08.08 |