[JS] querySelector vs getElement

1. getElementById, getElementsByClassName, getElementsByTagName

✅ 장점

• 성능이 빠름 (특히 getElementById)

❌ 단점

• getElementsByClassName과 getElementsByTagName은 HTMLCollection을 반환 → 배열 같지만 실제 배열 아님 (Array methods 사용 불가)
• 복잡한 CSS 선택자는 사용할 수 없음

 

---

2. querySelector, querySelectorAll

✅ 장점

• CSS 선택자 문법 지원 → #id, .class, div > span, ul li.active 등 복잡한 선택 가능
• 더 유연하고 강력함
• querySelector는 단일 요소, querySelectorAll은 NodeList 반환 → 반복문 가능 (forEach 등)

❌ 단점

• 성능은 getElementById보다는 느림 (대규모 DOM에서는 미세 차이)

 

 

 

 

💡 추천 사용 패턴

• 단순하게 id만 필요하면: getElementById
• 클래스나 태그 반복 처리 시: querySelectorAll
• 복잡한 조건 선택이 필요할 때: querySelector, querySelectorAll