요소 선택자

JavaScript에서는 여러 가지 요소 선택 방법을 제공하는데, 가장 흔히 사용되는 것들이 getElementById, getElementsByClassName, querySelector, querySelectorAll이다.

id랑 class를 이용해 찾는건 알겠는데 두 가지를 모두 지원하는 방식도 있고, 어느 상황에 어떤 방식을 사용하는 것이 더 적절한지 헷갈릴 때가 있다.

따라서, 비슷해 보이는 방식들을 적재 적소에 활용하기 위해 각각의 특징과 사용 케이스를 정리해보려고 한다.

getElementById

특정 id를 가진 요소를 선택하며, 유일한 요소를 빠르게 선택해야 할 때 사용한다.

<header id="main-header">메인 헤더</header>

const mainHeader = document.getElementById('main-header');

• id로 단일 요소를 선택한다.

• 가장 빠른 선택자이다. 문서 내에서 id는 유일해야 하므로, 브라우저는 빠르게 요소를 찾을 수 있다.

• 한 번에 하나의 요소만 선택할 수 있다.

getElementsByClassName

특정 클래스 이름을 가진 모든 요소를 선택하며, 같은 클래스를 가진 여러 요소를 동적으로 다뤄야할 때 유용하다.

<nav>
  <a href="/" class="nav-item">Home</a>
  <a href="/introduce" class="nav-item">Introduce</a>
  <a href="/contact" class="nav-item">Contact</a>
</nav>

const navItems = document.getElementsByClassName('nav-item');

• 클래스명으로 여러 요소를 선택한다.

• 동적인 HTMLCollection을 반환한다. 즉, DOM이 변경되면 자동으로 업데이트된다.

• 반환값이 배열이 아니므로, 배열 메서드를 사용하려면 변환이 필요하다.

querySelector

CSS 선택자를 사용해 첫 번째로 일치하는 요소를 선택하며, 복잡한 선택이 필요하거나 id가 없는 요소를 선택할 때 사용한다.

<nav>
  <a href="/" class="nav-item">Home</a>
  <a href="/introduce" class="nav-item">Introduce</a>
  <a href="/contact" class="nav-item">Contact</a>
</nav>

const firstNavItem = document.querySelector('nav .nav-item');

• CSS 선택자로 단일 요소를 선택한다.

• 복잡한 선택자를 사용할 수 있어 유연성이 높다.

• getElementById보다는 약간 느리다.

querySelectorAll

CSS 선택자와 일치하는 모든 요소를 선택하며, 복잡한 조건의 여러 요소를 선택해야할 때 사용한다.

<div>
  <button class="btn-primary">확인</button>
  <button class="btn-secondary">취소</button>
  <button class="btn-primary">제출</button>
</div>

const primaryButtons = document.querySelectorAll('button.btn-primary');

• CSS 선택자로 여러 요소를 선택한다.

• 정적 NodeList를 반환하며, 이는 배열과 유사하게 동작한다.

• getElementsByClassName보다는 느리다.

어떤 선택자를 사용해야 할까?

• 성능이 중요하고 id가 있다 → getElementById

• 실시간으로 업데이트되는 요소 컬렉션이 필요하다 → getElementsByClassName

• 복잡한 선택자나 유연성이 필요하다 → querySelector or querySelectorAll

다만, 일반적인 웹 애플리케이션에서는 차이가 미미하기 때문에 성능에 큰 영향을 주지는 않는다. querySelector와 querySelectorAll도 충분히 빠르고 편리하다는 의미이다.

따라서, 코드의 가독성과 유지보수성을 고려해 querySelector와 querySelectorAll를 주로 사용해도 무방하다.