반응형
DOM이란?
DOM(Document Object Model)은 HTML 문서를 JavaScript로 조작할 수 있게 해주는 인터페이스입니다. 브라우저가 HTML을 읽어서 만든 객체 모델로, 웹페이지의 모든 요소를 객체로 표현합니다.
🔍 DOM의 역할
<!-- HTML 문서 -->
<html>
<body>
<h1 id="title">안녕하세요!</h1>
<p class="content">DOM을 배워봅시다.</p>
</body>
</html>// JavaScript로 DOM 조작
document.getElementById('title').textContent = '제목 변경!';
document.querySelector('.content').style.color = 'red';DOM을 통해 HTML 요소의 내용, 스타일, 속성을 자유롭게 변경할 수 있습니다.
DOM 트리 구조
DOM은 HTML 문서를 트리 구조로 표현합니다. 각 HTML 요소는 노드(Node)가 됩니다.
HTML 구조
<!DOCTYPE html>
<html>
<head>
<title>DOM 예제</title>
</head>
<body>
<div id="container">
<h1>제목</h1>
<p>내용</p>
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
</div>
</body>
</html>DOM 트리 구조
document
└── html
├── head
│ └── title
│ └── "DOM 예제"
└── body
└── div#container
├── h1
│ └── "제목"
├── p
│ └── "내용"
└── ul
├── li
│ └── "항목 1"
└── li
└── "항목 2"주요 노드 타입
- Document: 문서 전체 (
document) - Element: HTML 태그 (
div,p,h1등) - Text: 텍스트 내용
- Attribute: 요소의 속성 (
id,class등)
DOM 요소 선택하기
JavaScript로 DOM 요소를 조작하려면 먼저 해당 요소를 선택해야 합니다.
기본 선택 메서드
// ID로 선택 (하나만 반환)
let title = document.getElementById('title');
// 클래스로 선택 (여러 개 반환)
let items = document.getElementsByClassName('item');
// 태그로 선택 (여러 개 반환)
let paragraphs = document.getElementsByTagName('p');
// CSS 선택자로 선택 (첫 번째만 반환)
let firstItem = document.querySelector('.item');
// CSS 선택자로 모두 선택 (NodeList 반환)
let allItems = document.querySelectorAll('.item');실무에서 자주 사용하는 선택 방법
<div class="container">
<h1 id="main-title">제목</h1>
<p class="description">설명</p>
<button class="btn primary">클릭</button>
</div>// ID 선택 (가장 빠름)
let title = document.getElementById('main-title');
// 클래스 선택
let description = document.querySelector('.description');
// 복합 선택자
let primaryButton = document.querySelector('.btn.primary');
// 자식 요소 선택
let containerTitle = document.querySelector('.container h1');
// 모든 버튼 선택
let allButtons = document.querySelectorAll('button');DOM 조작하기
선택한 요소의 내용, 스타일, 속성을 변경할 수 있습니다.
1. 내용 변경
let title = document.getElementById('title');
// 텍스트 내용 변경
title.textContent = '새로운 제목';
// HTML 내용 변경
title.innerHTML = '<strong>굵은 제목</strong>';
console.log(title.textContent); // "굵은 제목"
console.log(title.innerHTML); // "<strong>굵은 제목</strong>"2. 스타일 변경
let element = document.querySelector('.box');
// 개별 스타일 변경
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
element.style.fontSize = '20px';
// 여러 스타일 한 번에 변경
element.style.cssText = 'color: blue; font-size: 18px; margin: 10px;';3. 클래스 조작
let button = document.querySelector('.btn');
// 클래스 추가
button.classList.add('active');
// 클래스 제거
button.classList.remove('disabled');
// 클래스 토글 (있으면 제거, 없으면 추가)
button.classList.toggle('hidden');
// 클래스 존재 확인
if (button.classList.contains('active')) {
console.log('버튼이 활성화되어 있습니다.');
}4. 속성 조작
let image = document.querySelector('img');
// 속성 설정
image.setAttribute('src', 'new-image.jpg');
image.setAttribute('alt', '새로운 이미지');
// 속성 가져오기
let imageSrc = image.getAttribute('src');
// 속성 제거
image.removeAttribute('title');
// 직접 속성 접근
image.src = 'another-image.jpg';실무 활용 예제
1. 동적 콘텐츠 업데이트
<div id="user-info">
<h2 id="username">사용자명</h2>
<p id="email">이메일</p>
<span id="status" class="offline">오프라인</span>
</div>// 사용자 정보 업데이트 함수
function updateUserInfo(userData) {
document.getElementById('username').textContent = userData.name;
document.getElementById('email').textContent = userData.email;
let statusElement = document.getElementById('status');
statusElement.textContent = userData.isOnline ? '온라인' : '오프라인';
statusElement.className = userData.isOnline ? 'online' : 'offline';
}
// 사용 예제
updateUserInfo({
name: '김철수',
email: 'kim@example.com',
isOnline: true
});2. 이벤트 처리
<button id="toggle-btn">모드 변경</button>
<div id="content" class="light-mode">내용</div>let toggleButton = document.getElementById('toggle-btn');
let content = document.getElementById('content');
toggleButton.addEventListener('click', function() {
// 다크 모드 토글
content.classList.toggle('dark-mode');
content.classList.toggle('light-mode');
// 버튼 텍스트 변경
if (content.classList.contains('dark-mode')) {
toggleButton.textContent = '라이트 모드';
} else {
toggleButton.textContent = '다크 모드';
}
});3. 동적 요소 생성
// 새로운 요소 생성 함수
function createTodoItem(text) {
// 요소 생성
let li = document.createElement('li');
let span = document.createElement('span');
let deleteBtn = document.createElement('button');
// 내용 설정
span.textContent = text;
deleteBtn.textContent = '삭제';
deleteBtn.className = 'delete-btn';
// 이벤트 추가
deleteBtn.addEventListener('click', function() {
li.remove();
});
// 요소 조립
li.appendChild(span);
li.appendChild(deleteBtn);
return li;
}
// 사용 예제
let todoList = document.getElementById('todo-list');
let newItem = createTodoItem('DOM 공부하기');
todoList.appendChild(newItem);4. 폼 검증
<form id="signup-form">
<input type="email" id="email" placeholder="이메일">
<input type="password" id="password" placeholder="비밀번호">
<button type="submit">가입하기</button>
<div id="error-message"></div>
</form>let form = document.getElementById('signup-form');
let errorDiv = document.getElementById('error-message');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 기본 제출 동작 방지
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
// 검증
if (!email.includes('@')) {
showError('올바른 이메일을 입력하세요.');
return;
}
if (password.length < 6) {
showError('비밀번호는 6자 이상이어야 합니다.');
return;
}
showSuccess('가입이 완료되었습니다!');
});
function showError(message) {
errorDiv.textContent = message;
errorDiv.style.color = 'red';
}
function showSuccess(message) {
errorDiv.textContent = message;
errorDiv.style.color = 'green';
}마무리
DOM은 JavaScript로 웹페이지를 동적으로 조작할 수 있게 해주는 핵심 개념입니다. DOM을 이해하면 정적인 HTML을 사용자와 상호작용하는 웹 애플리케이션으로 만들 수 있습니다.
DOM 조작을 마스터하면 사용자 친화적인 인터랙티브 웹 애플리케이션을 만들 수 있습니다!
'JavaScript > DOM 조작' 카테고리의 다른 글
| JavaScript 실습: 버튼 클릭 시 배경 색 바꾸기 - 단계별 가이드 (1) | 2025.06.24 |
|---|---|
| JavaScript DOM 조작 - 내용 변경, 스타일 변경, 클래스 조작 가이드 (0) | 2025.06.24 |
| JavaScript DOM 요소 선택 - getElementById, querySelector 완전 가이드 (0) | 2025.06.24 |