웹 개발에서 DOM(Document Object Model, 문서 객체 모델) 은 웹 페이지를 동적으로 변경하고 조작할 수 있도록 하는 핵심 개념입니다. 자바스크립트를 활용하면 DOM을 직접 수정하여 사용자와 상호 작용하는 동적인 웹 페이지를 만들 수 있습니다.
이번 글에서는 DOM 조작의 기본 개념부터 요소 선택, 조작 방법, 실전 예제까지 상세히 알아보겠습니다. 초보자부터 숙련된 개발자까지 모두 활용할 수 있는 실용적인 내용을 담고 있으니 끝까지 읽어보세요!
🔹 DOM이란 무엇인가?
DOM은 HTML 문서를 계층적 구조로 표현한 프로그래밍 인터페이스입니다. 이를 통해 자바스크립트가 웹 페이지의 요소를 읽고, 수정하고, 삭제할 수 있습니다.
🎯 DOM 조작을 활용하면?
- 사용자의 입력에 따라 페이지 내용을 실시간으로 변경
- 버튼 클릭 시 특정 요소의 색상 변경
- 새로운 HTML 요소를 추가 또는 삭제
- CSS 스타일을 동적으로 적용
즉, 자바스크립트 기반의 동적 웹 애플리케이션을 개발하는 데 필수적인 기술입니다.
🔹 요소 선택 방법
DOM을 조작하려면 먼저 원하는 HTML 요소를 선택해야 합니다. 자바스크립트에서는 여러 가지 방법을 제공하며, 선택 방식에 따라 반환되는 데이터 유형이 다릅니다.
1️⃣ ID로 요소 선택하기 (getElementById)
특정 ID를 가진 요소를 선택하는 가장 직관적인 방법입니다.
const header = document.getElementById('header');✅ 특징
id="header"를 가진 요소 한 개만 선택- ID는 문서에서 유일해야 함
2️⃣ 클래스명으로 요소 선택 (getElementsByClassName)
특정 클래스를 가진 요소들을 배열과 유사한 HTMLCollection 형태로 반환합니다.
const items = document.getElementsByClassName('item');✅ 특징
- 동일한 클래스를 가진 여러 요소를 선택
for또는Array.from()을 사용해 반복 가능
3️⃣ 태그명으로 요소 선택 (getElementsByTagName)
문서 내 특정 태그를 가진 모든 요소를 선택할 수 있습니다.
const paragraphs = document.getElementsByTagName('p');✅ 특징
<p>태그를 가진 모든 요소를 선택- HTMLCollection을 반환하여 배열처럼 다룰 수 있음
4️⃣ CSS 선택자로 요소 선택 (querySelector)
CSS 선택자를 사용하여 가장 첫 번째로 일치하는 요소를 반환합니다.
const firstItem = document.querySelector('.item');✅ 특징
document.querySelector('#header')처럼 다양한 선택자 활용 가능- 가장 첫 번째 요소만 반환
5️⃣ 여러 요소를 선택 (querySelectorAll)
CSS 선택자로 모든 일치하는 요소를 NodeList 형태로 반환합니다.
const allItems = document.querySelectorAll('.item');✅ 특징
NodeList는forEach()메서드를 사용 가능- HTMLCollection보다 유연하게 활용할 수 있음
🔹 선택한 요소 조작 방법
이제 선택한 요소를 변경하는 방법을 살펴보겠습니다.
1️⃣ 요소의 내용 변경 (innerHTML, textContent)
요소 내부의 텍스트 또는 HTML을 수정할 수 있습니다.
header.innerHTML = '<span style="color:red">새로운 제목</span>';
header.textContent = '새로운 제목'; // HTML 태그 없이 텍스트만 변경✅ 차이점
innerHTML: HTML 태그 포함 가능textContent: HTML 태그를 그대로 출력
2️⃣ 스타일 변경 (style 속성)
DOM 요소의 CSS 스타일을 직접 변경할 수 있습니다.
header.style.color = 'blue'; // 글자 색 변경
header.style.fontSize = '24px'; // 글자 크기 변경✅ 팁
classList를 사용하는 것이 유지보수에 더 좋음 (아래 참조)
3️⃣ 속성 추가 및 변경 (setAttribute)
HTML 요소에 새로운 속성을 추가하거나 변경할 수 있습니다.
header.setAttribute('data-custom', 'special-header');✅ 활용 예시
setAttribute('src', 'image.jpg')→ 이미지 변경setAttribute('disabled', 'true')→ 버튼 비활성화
4️⃣ 클래스 추가 및 제거 (classList)
CSS 클래스를 추가하거나 제거할 수 있습니다.
firstItem.classList.add('active'); // 클래스 추가
firstItem.classList.remove('inactive'); // 클래스 제거
firstItem.classList.toggle('highlight'); // 클래스 토글 (있으면 제거, 없으면 추가)✅ 유용한 기능
toggle()을 사용하면 간단하게 클래스를 추가/제거
🔹 실전 예제: 버튼 클릭으로 DOM 변경하기
DOM 조작의 개념을 이해했다면, 실전에서 어떻게 활용할 수 있는지 살펴보겠습니다.
🛠 HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 조작 예제</title>
<style>
.active { color: red; font-weight: bold; }
</style>
</head>
<body>
<h1 id="header">안녕하세요!</h1>
<ul>
<li class="item">아이템 1</li>
<li class="item">아이템 2</li>
<li class="item">아이템 3</li>
</ul>
<button id="changeButton">변경하기</button>
<script>
document.getElementById('changeButton').onclick = function() {
const header = document.getElementById('header');
header.textContent = '제목이 변경되었습니다!';
header.style.color = 'green';
const firstItem = document.querySelector('.item');
firstItem.classList.add('active');
const secondItem = document.querySelectorAll('.item')[1];
if (secondItem) secondItem.remove();
};
</script>
</body>
</html>📝 실행 결과
- 버튼을 클릭하면:
h1요소의 텍스트가 변경되고, 색상이 초록색으로 변경- 첫 번째 리스트 아이템이 강조 표시됨
- 두 번째 아이템이 삭제됨
이처럼 자바스크립트로 DOM을 조작하면, 사용자 입력에 반응하는 동적인 웹 페이지를 만들 수 있습니다.
🔹 결론: DOM 조작의 중요성
DOM 조작은 모든 프론트엔드 개발자가 반드시 익혀야 할 핵심 개념입니다.
웹 페이지를 더욱 동적이고 사용자 친화적으로 개선할 수 있는 강력한 도구이므로, 위 내용을 반복해서 연습해보세요! 🚀
✅ 핵심 요약
- 요소 선택 방법:
getElementById,querySelector,querySelectorAll등 - 요소 조작:
innerHTML,style,setAttribute,classList활용 - 실전 적용: 버튼 클릭 이벤트와 함께 동적인 변화 구현
'프로그래밍 > Javascript' 카테고리의 다른 글
| 자바스크립트 개발자를 위한 완벽한 예외 처리 가이드: 안정적인 애플리케이션 개발의 핵심 (0) | 2025.02.13 |
|---|---|
| 웹 개발의 핵심: DOM 조작과 이벤트 처리 마스터하기 🚀 (0) | 2025.02.13 |
| 웹 개발자를 위한 DOM 조작 완벽 가이드: DOM 트리의 이해와 활용 (0) | 2025.02.13 |
| 자바스크립트 예외 처리 완전 정복: try-catch-finally부터 사용자 정의 예외, 오류 처리 패턴까지 (0) | 2025.02.13 |
| 자바스크립트 비동기 프로그래밍의 핵심: 프로미스 완전 정복 가이드 (0) | 2025.02.13 |