DOM 요소 선택 방법 요약

방법	메소드	반환	사용 예시
태그명	getElementsByTagName("p")	HTMLCollection	반복 필요
아이디	getElementById("id")	단일 요소	가장 빠름
클래스명	getElementsByClassName("item")	HTMLCollection
name 속성	getElementsByName("email")	NodeList
CSS 선택자 (1개)	querySelector(".box")	단일 요소	추천 방식
CSS 선택자 (전체)	querySelectorAll("ul li")	NodeList	반복문 사용 필요

추천: querySelector / querySelectorAll

→ CSS 선택자를 그대로 사용하므로 가독성 · 유연성 최고입니다.

---

✍️ 자주 쓰는 DOM 조작 예제

① 요소 선택 + 스타일 변경

const items = document.querySelectorAll("li.odd");
items.forEach((item) => {
  item.style.color = "red";
});

② innerHTML vs textContent 차이

el.innerHTML = "<b>굵게!</b>"; // 태그 포함 (HTML 삽입)
el.textContent = "<b>굵게!</b>"; // 그대로 출력 (태그 무효)

③ 속성 변경 예제

const link = document.getElementById("link");
link.href = "https://naver.com";
link.target = "_blank";

④ 이벤트 + 스타일 변경

const box = document.querySelector(".box");
box.addEventListener("mouseenter", () => {
  box.style.backgroundColor = "yellow";
});

---

⚠️ 주의할 점

• getElementsBy..., querySelectorAll() → 반복 처리(forEach) 필요
• innerHTML 사용 시 → 스크립트 삽입 취약점(XSS) 주의
• 스타일 조작은 많은 경우 CSS 클래스 토글이 더 좋음

box.classList.add("active");
box.classList.toggle("dark-mode");

---

🧠 실무 팁 모음

상황	추천 방식
요소를 찾고 반복 적용할 때	querySelectorAll() + forEach()
기존 내용을 유지하며 새 HTML 삽입	insertAdjacentHTML("beforeend", "...")
속성 있는지 체크	el.hasAttribute("src")
요소 삭제	el.remove() 또는 parent.removeChild(el)
CSS 토글	el.classList.toggle("on")
style 직접보다 클래스 조작 권장	유지보수성과 일관성 ↑