자바스크립트 실무 유틸 함수 시리즈 16 - HTML 요소 조작을 위한 유틸

이번 16편에서는 DOM 기반 HTML 요소를 쉽고 안전하게 조작할 수 있도록 도와주는 유틸 함수들을 소개합니다. 버튼 제어, 클래스 토글, 요소 생성, 속성 관리 등 다양한 실무 상황에 대응 가능합니다.

---

✅ 1. addClass (클래스 추가)

📌 클래스 이름을 요소에 추가

function addClass(el, className) {
  if (el && !el.classList.contains(className)) {
    el.classList.add(className);
  }
}

📌 활용 예시

• 상태 기반 스타일 변경
• 모달 열기 처리

---

✅ 2. removeClass (클래스 제거)

📌 클래스 이름을 요소에서 제거

function removeClass(el, className) {
  if (el && el.classList.contains(className)) {
    el.classList.remove(className);
  }
}

📌 활용 예시

• 닫기 버튼 시 스타일 원상복구
• 입력 오류 해제 처리

---

✅ 3. toggleClass (클래스 토글)

📌 클래스 유무에 따라 추가/제거

function toggleClass(el, className) {
  if (el) {
    el.classList.toggle(className);
  }
}

📌 활용 예시

• 사이드 메뉴 토글
• 어두운 테마 전환

---

✅ 4. setAttributes (여러 속성 설정)

📌 요소에 여러 속성을 일괄 적용

function setAttributes(el, attrs) {
  for (const key in attrs) {
    el.setAttribute(key, attrs[key]);
  }
}

📌 활용 예시

• 이미지 태그 동적 설정
• 버튼 속성 변경

---

✅ 5. createElement (요소 생성과 설정)

📌 요소 생성 후 클래스, 속성, 내용 적용

function createElement(tag, options = {}) {
  const el = document.createElement(tag);
  if (options.className) el.className = options.className;
  if (options.attributes) setAttributes(el, options.attributes);
  if (options.text) el.textContent = options.text;
  return el;
}

📌 활용 예시

• 메시지 또는 알림 DOM 생성
• 동적 컴포넌트 UI 구성

---

✅ 결론

HTML 요소 조작은 사용자 인터페이스에 직접적인 영향을 미칩니다. 이번 시리즈에서 소개한 함수들을 활용하면 DOM을 더 깔끔하고 일관성 있게 다룰 수 있으며, 유지보수성과 재사용성도 높일 수 있습니다.