반응형
이번 강좌에서는 자바스크립트 DOM 조작 기본 개념과 함께 jQuery와의 차이를 직접 실습해볼께요.
실습 예제를 통해 클래스 추가/삭제, 요소 삽입, 애니메이션 효과까지 한 번에 익혀보세요! 😄
📌 DOM(Document Object Model) 이란?
DOM은 웹 문서를 구조화해서 자바스크립트로 HTML 요소를 쉽게 제어할 수 있도록 해주는 개념입니다.
- HTML 문서의 모든 태그 → 객체화
- 자바스크립트를 이용해 해당 요소에 접근, 변경, 삭제 가능
🎮 DOM 조작 기본 실습(JS vs jQuery)
1️⃣ 텍스트 내용 바꾸기
다음 실습으로 자바스크립트와 jQuery로 h2 태그 내용을 변경해볼게요.
<button onclick="changeTitleJS()">JS로 제목 바꾸기</button>
<button onclick="changeTitleJQ()">jQuery로 제목 바꾸기</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function changeTitleJS() {
document.getElementById("title").textContent = "자바스크립트로 변경!";
}
function changeTitleJQ() {
$("#title").text("jQuery로 변경!");
}
</script>2️⃣ 클래스 추가/제거
<style>
.highlight { color: #fff; background: #007bff; padding: 5px; border-radius: 4px; }
</style>
<button onclick="addClassJS()">JS로 클래스 추가</button>
<button onclick="removeClassJS()">JS로 클래스 제거</button>
<button onclick="addClassJQ()">jQuery로 클래스 추가</button>
<button onclick="removeClassJQ()">jQuery로 클래스 제거</button>
<script>
function addClassJS() {
document.getElementById("title").classList.add("highlight");
}
function removeClassJS() {
document.getElementById("title").classList.remove("highlight");
}
function addClassJQ() {
$("#title").addClass("highlight");
}
function removeClassJQ() {
$("#title").removeClass("highlight");
}
</script>
3️⃣ 새 요소 삽입하기
<ul id="list">
<li>첫 번째</li>
<li>두 번째</li>
</ul>
<button onclick="addItemJS()">JS로 항목 추가</button>
<button onclick="addItemJQ()">jQuery로 항목 추가</button>
<script>
function addItemJS() {
const newItem = document.createElement("li");
newItem.textContent = "JS로 추가된 항목";
document.getElementById("list").appendChild(newItem);
}
function addItemJQ() {
$("#list").append("<li>jQuery로 추가된 항목</li>");
}
</script>
4️⃣ 페이드 애니메이션 효과
<button onclick="hideJS()">JS로 숨기기</button>
<button onclick="showJS()">JS로 보이기</button>
<button onclick="fadeOutJQ()">jQuery로 페이드 아웃</button>
<button onclick="fadeInJQ()">jQuery로 페이드 인</button>
<style>
#title { transition: all 0.5s ease; }
</style>
<script>
function hideJS() {
document.getElementById("title").style.opacity = "0";
}
function showJS() {
document.getElementById("title").style.opacity = "1";
}
function fadeOutJQ() {
$("#title").fadeOut();
}
function fadeInJQ() {
$("#title").fadeIn();
}
</script>
5️⃣ 슬라이드 애니메이션 효과
<button onclick="slideUpJS()">JS로 슬라이드 업</button>
<button onclick="slideDownJS()">JS로 슬라이드 다운</button>
<button onclick="slideUpJQ()">jQuery로 슬라이드 업</button>
<button onclick="slideDownJQ()">jQuery로 슬라이드 다운</button>
<style>
#slideTitle { background: #007bff; color: #fff; padding: 10px; margin: 10px 0; transition: all 0.5s ease; overflow: hidden; }
</style>
<script>
function slideUpJS() {
const title = document.getElementById("slideTitle");
title.style.height = "0";
title.style.padding = "0";
title.style.opacity = "0";
}
function slideDownJS() {
const title = document.getElementById("slideTitle");
title.style.height = "50px";
title.style.padding = "10px";
title.style.opacity = "1";
}
function slideUpJQ() {
$("#slideTitle").slideUp();
}
function slideDownJQ() {
$("#slideTitle").slideDown();
}
</script>
📊 자바스크립트와 jQuery DOM 조작 비교표
| 기능 | 자바스크립트 | jQuery |
|---|---|---|
| 텍스트 변경 | element.textContent = "텍스트" | $(선택자).text("텍스트") |
| 클래스 추가 | element.classList.add("클래스") | $(선택자).addClass("클래스") |
| 새 요소 추가 | createElement + appendChild | $(선택자).append("HTML") |
| 페이드 효과 | style.opacity 조절 | fadeIn() / fadeOut() |
| 슬라이드 효과 | style.height, padding 조절 | slideUp() / slideDown() |
✅ 정리
이번 강좌를 통해 자바스크립트로 DOM 조작하는 방법과 jQuery로 같은 기능을 더 간결하게 처리하는 방법을 실습해보며 익혀보았습니다.
HTML 요소의 내용을 바꾸고, 클래스를 추가하거나 제거하고, 새 요소를 삽입하고, 애니메이션 효과까지 다양한 DOM 조작이 가능합니다.
실제로 직접 코드를 실행해보면서 체득하는 게 가장 빠릅니다! 😄
계속해서 이런 식으로 DOM 조작을 익히면, 웹페이지에 동적인 기능을 추가하는 게 아주 쉬워질 거예요.
반응형