반응형
SMALL
📌 개요
자바스크립트에서 DOM(Document Object Model)을 조작하는 방법을 배워보겠습니다.
이 글에서는 바닐라 자바스크립트를 사용하여 다음 기능을 구현합니다:
- 클릭 시 li 요소에 on 클래스를 추가/제거 (토글 기능)
- a 태그 버튼을 사용하여 새로운 li 요소를 동적으로 추가
- 사용된 자바스크립트 메서드들에 대한 상세 설명
이 기능을 통해 JavaScript로 DOM을 조작하는 기본적인 원리를 이해하고, 실무에서 활용할 수 있도록 학습해봅시다! 💡
📌 구현 목표
✅ li 요소를 클릭하면 on 클래스를 추가하거나 제거하는 기능 ✅ a 태그 버튼을 클릭하면 새로운 li 요소를 동적으로 생성 ✅ 사용된 주요 JavaScript 메서드 설명 포함 ✅ 두 가지 예제 제공
📌 HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript DOM 컨트롤</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>JavaScript로 `li` 조작하기</h2>
<ul id="itemList">
<li>첫 번째 아이템</li>
<li>두 번째 아이템</li>
<li>세 번째 아이템</li>
</ul>
<a href="#" id="addItem">새로운 아이템 추가</a>
</div>
<script src="script.js"></script>
</body>
</html>📌 CSS 스타일 (styles.css)
body {
font-family: Arial, sans-serif;
text-align: center;
}
.container {
width: 300px;
margin: 20px auto;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin: 5px 0;
cursor: pointer;
}
li.on {
background-color: yellow;
}
a {
display: inline-block;
padding: 10px 15px;
background-color: blue;
color: white;
text-decoration: none;
margin-top: 10px;
cursor: pointer;
}📌 JavaScript (script.js)
document.addEventListener("DOMContentLoaded", function() {
const itemList = document.getElementById("itemList");
const addItemBtn = document.getElementById("addItem");
// 1️⃣ `li` 클릭 시 `on` 클래스 토글 기능
itemList.addEventListener("click", function(event) {
if (event.target.tagName === "LI") {
event.target.classList.toggle("on");
}
});
// 2️⃣ `a` 태그 클릭 시 새로운 `li` 요소 추가
addItemBtn.addEventListener("click", function(event) {
event.preventDefault(); // a 태그의 기본 동작 방지
const newLi = document.createElement("li"); // 새로운 li 생성
newLi.textContent = `새로운 아이템 ${itemList.children.length + 1}`;
itemList.appendChild(newLi); // ul 안에 추가
});
});📌 JavaScript 주요 메서드 설명
1️⃣ classList.toggle()
- classList.toggle("on"): 요소의 on 클래스를 추가/제거하는 역할을 합니다.
- 사용 예시:
- element.classList.toggle("on");
- 만약 on 클래스가 없으면 추가하고, 있으면 제거합니다.
2️⃣ document.createElement()
- 새로운 HTML 요소를 생성하는 메서드입니다.
- 사용 예시:
- const newElement = document.createElement("li");
- createElement("li")를 사용하면 <li> 태그가 생성됩니다.
3️⃣ appendChild()
- 부모 요소의 마지막 자식으로 요소를 추가합니다.
- 사용 예시:
- parentElement.appendChild(childElement);
- 위 코드에서는 <ul> 리스트의 마지막에 새로운 <li> 요소를 추가합니다.
4️⃣ event.preventDefault()
- <a> 태그는 기본적으로 클릭 시 페이지를 이동시키므로, 이를 방지하는 메서드입니다.
- 사용 예시:
- event.preventDefault();
- 이를 사용하면 버튼을 클릭해도 페이지가 이동하지 않습니다.
📌 추가 예제: 마우스를 올리면 li 강조 효과
document.querySelectorAll("li").forEach(item => {
item.addEventListener("mouseover", function() {
this.style.color = "red";
});
item.addEventListener("mouseout", function() {
this.style.color = "black";
});
});✅ 설명: 마우스를 li 요소 위로 올리면 글씨 색이 빨간색으로 변경됩니다.
📌 마무리 🎯
- **classList.toggle()**을 사용하면 클래스를 쉽게 추가/제거할 수 있습니다.
- **createElement()와 appendChild()**를 활용하면 DOM에 동적 요소 추가가 가능합니다.
- **event.preventDefault()**를 사용하여 <a> 태그의 기본 동작을 방지할 수 있습니다.
🚀 이제 직접 코드를 실행하고 원하는 기능을 추가해 보세요!
반응형
LIST
'Javascript' 카테고리의 다른 글
| [Dseok의 코딩스터디] javascript removeAttribute() 메서드 개념 한방에 끝내기 | 개념 & 실제 활용 예제 10가지 (0) | 2025.02.27 |
|---|---|
| [Dseok의 코딩스터디] JavaScript & jQuery를 사용하여 인라인 CSS 속성 제거하는 5가지 방법 (0) | 2025.02.27 |
| [Dseok의 코딩스터디] html 부모 요소의 자식 요소 배열로 가져오기 & 동적 추가 기능 구현 (1) | 2025.02.21 |
| [Dseok의 코딩스터디] 자바스크립트 switch문 (0) | 2025.02.19 |
| [Dseok의 코딩스터디] 비밀번호 보이게하기, 숨기기 기능 구현 (0) | 2024.11.04 |