1. DOM 요소 동적 생성 및 삭제
JavaScript를 사용하여 HTML 요소를 동적으로 생성하고, 기존 요소에 추가하거나 삭제할 수 있습니다.
요소 생성 및 추가
document.createElement()를 사용하여 새 HTML 요소를 생성하고, appendChild() 또는 append()로 부모 요소에 추가할 수 있습니다.
// 새 <div> 요소 생성
const newDiv = document.createElement("div");
newDiv.textContent = "동적으로 생성된 요소";
// 생성된 요소를 <body>에 추가
document.body.appendChild(newDiv);요소 삭제
remove() 메서드를 사용하여 요소를 삭제할 수 있습니다.
// 특정 요소를 선택하고 삭제
const elementToRemove = document.querySelector("#remove-me");
elementToRemove.remove();parentNode.removeChild() 메서드도 사용할 수 있습니다.
const parent = document.querySelector("#parent");
const child = document.querySelector("#child");
parent.removeChild(child);2. 클래스 동적 추가 및 토글
JavaScript에서 classList 속성을 사용하면 요소의 클래스 목록을 동적으로 관리할 수 있습니다.
클래스 추가 및 제거
const element = document.querySelector(".my-element");
// 클래스 추가
element.classList.add("new-class");
// 클래스 제거
element.classList.remove("new-class");클래스 토글
toggle() 메서드를 사용해 클래스를 추가하거나 제거할 수 있습니다.
element.classList.toggle("active"); // 클래스가 있으면 제거, 없으면 추가3. 이벤트 위임(Event Delegation)
이벤트 위임은 부모 요소에 이벤트 리스너를 설정하여 자식 요소의 이벤트를 효율적으로 처리하는 기법입니다. 이를 통해 많은 요소에 개별적으로 이벤트 리스너를 추가하는 것보다 메모리와 성능 면에서 유리합니다.
이벤트 위임 예제
<ul id="item-list">
<li>아이템 1</li>
<li>아이템 2</li>
<li>아이템 3</li>
</ul>
document.getElementById("item-list").addEventListener("click", (event) => {
if (event.target.tagName === "LI") {
alert(`클릭된 아이템: ${event.target.textContent}`);
}
});코드 설명
- ul 요소에 클릭 이벤트 리스너를 추가하고, 이벤트가 발생했을 때 이벤트 대상(event.target)이 li 태그인지 확인합니다.
- 이벤트 위임은 동적 요소를 다룰 때도 유용합니다. 추가된 요소들도 자동으로 이벤트 리스너에 포함되기 때문입니다.
4. DOM 조작 심화: 요소 삽입 및 복제
요소 삽입
insertBefore() 메서드를 사용해 요소를 특정 위치에 삽입할 수 있습니다.
const parentElement = document.getElementById("parent");
const newElement = document.createElement("div");
newElement.textContent = "새 요소";
// 기존 자식 요소 앞에 삽입
parentElement.insertBefore(newElement, parentElement.firstChild);요소 복제
cloneNode() 메서드는 요소를 복제할 때 사용됩니다. true를 인자로 전달하면 자식 요소까지 깊은 복사가 됩니다.
const originalElement = document.getElementById("original");
const clonedElement = originalElement.cloneNode(true); // 깊은 복사
document.body.appendChild(clonedElement);5. 실전 예제: 동적 요소 추가 및 이벤트 위임
예제: 동적으로 생성된 버튼에 이벤트 추가
HTML:
<div id="button-container"></div>
<button id="add-button">버튼 추가</button>
document.getElementById("add-button").addEventListener("click", () => {
const buttonContainer = document.getElementById("button-container");
const newButton = document.createElement("button");
newButton.textContent = "동적 버튼";
buttonContainer.appendChild(newButton);
});
// 이벤트 위임으로 모든 버튼에 이벤트 추가
document.getElementById("button-container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
alert("동적 버튼 클릭됨");
}
});코드 설명
- #add-button을 클릭하면 새로운 버튼이 #button-container에 추가됩니다.
- #button-container에 이벤트 위임을 사용하여 새로 추가된 버튼에도 클릭 이벤트가 적용됩니다.
요약
이번 강의에서는 DOM의 심화 조작 방법과 동적 이벤트 핸들링을 배웠습니다. JavaScript로 HTML 요소를 동적으로 생성, 삭제하고 클래스 조작 및 이벤트 위임 기법을 통해 효율적인 이벤트 처리를 학습했습니다. 다음 강의에서는 JavaScript 모듈화와 ES6+ 문법을 소개하여 코드의 구조화와 유지보수를 돕는 방법을 배워보겠습니다.
'Study > JS' 카테고리의 다른 글
| JavaScript 기초 강의 8편: 오류 처리와 디버깅 기법 (0) | 2024.12.08 |
|---|---|
| JavaScript 기초 강의 7편: 모듈화와 ES6+ 문법 배우기 (0) | 2024.12.07 |
| JavaScript 기초 강의 5편: 비동기 프로그래밍과 Promise, async/await (0) | 2024.12.05 |
| JavaScript 기초 강의 4편: 함수의 고급 사용법 (클로저, 콜백 함수, 화살표 함수) (0) | 2024.12.04 |
| JavaScript 기초 강의 3편: 배열과 객체 다루기 (0) | 2024.12.03 |
