JavaScript querySelector 완벽 가이드 효율적인 DOM 선택과 활용법

JavaScript querySelector란 무엇인가?

querySelector()는 JavaScript의 DOM API 중 가장 유용한 메서드로, CSS 선택자 문법을 기반으로 HTML 요소를 선택할 수 있게 해준다. 이 메서드는 특정 클래스, ID, 태그, 속성 등에 맞는 첫 번째 DOM 요소를 반환하며, 효율적인 스크립트 제어에 필수적이다. document.querySelector()를 통해 HTML 문서 내 원하는 요소를 간편하게 조작할 수 있으며, 이는 프론트엔드 개발 생산성을 극대화하는 핵심 기술이다.

querySelector 기본 문법과 활용 예시

기본 문법

document.querySelector(selectors);

• selectors: CSS 선택자 문자열

기본 사용 예시

const title = document.querySelector('h1');
const button = document.querySelector('.submit-button');
const menu = document.querySelector('#main-menu');

이처럼 querySelector()는 다양한 선택자와 조합하여 유연하게 사용할 수 있다.

다양한 선택자 예시

• 태그 선택자: 'div', 'p', 'a'
• 클래스 선택자: '.class-name'
• ID 선택자: '#id-name'
• 속성 선택자: 'input[type="text"]'
• 조합 선택자: '.container > ul > li.active'

반응형

querySelector와 querySelectorAll 차이점 분석

1. 반환 값

• querySelector() → 조건에 맞는 첫 번째 요소 반환
• querySelectorAll() → 조건에 맞는 모든 요소(NodeList) 반환

const firstItem = document.querySelector('.item'); // 첫 번째만
const allItems = document.querySelectorAll('.item'); // 모든 요소

2. 반복 처리 여부

• querySelector()는 단일 요소만 반환되므로 forEach 불가
• querySelectorAll()은 NodeList이므로 forEach, for 등 반복 처리 가능

document.querySelectorAll('.item').forEach(el => {
  el.style.color = 'red';
});

3. 실행 속도 및 성능

• querySelector()가 querySelectorAll()보다 빠르다.
• 요소가 많을 경우 성능 차이 체감 가능

반응형

querySelector 실전 활용 예제

폼 유효성 검사

const emailInput = document.querySelector('input[type="email"]');

if (!emailInput.value.includes('@')) {
  alert('올바른 이메일을 입력하세요');
}

모달 창 열기/닫기

const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close');

closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

메뉴 활성화 처리

const activeItem = document.querySelector('nav li.active');
activeItem.classList.remove('active');

const clickedItem = document.querySelector('nav li:nth-child(3)');
clickedItem.classList.add('active');

반응형

복잡한 CSS 선택자 조합 활용법

자식 선택자와 후손 선택자

document.querySelector('.wrapper > .box'); // 자식 요소만 선택
document.querySelector('.wrapper .box');   // 모든 하위 요소 중 box 선택

속성 선택자 조합

document.querySelector('input[type="checkbox"][checked]');

동적 선택자 활용

const currentPage = document.querySelector('a[href="/about"].active');

이와 같은 정밀한 선택자 조합을 통해 UI 상호작용을 세밀하게 제어할 수 있다.

반응형

querySelector 사용 시 주의사항

1. 존재 여부 확인 필수

선택한 요소가 null일 수 있으므로, 조건문으로 체크가 필요하다.

const el = document.querySelector('.not-exist');
if (el) {
  el.textContent = '존재합니다.';
}

2. 동적 요소에는 재선택 필요

동적으로 삽입된 DOM에는 querySelector()를 다시 호출해야 한다.

setTimeout(() => {
  const newElement = document.querySelector('.new-item');
  newElement?.classList.add('highlight');
}, 1000);

반응형

querySelector vs getElementById 등 전통 메서드와의 차이

메서드 반환 요소 CSS 선택자 사용 반환 형태

getElementById	ID 하나	불가능	단일 요소
getElementsByClassName	클래스 전체	불가능	HTMLCollection
getElementsByTagName	태그 전체	불가능	HTMLCollection
querySelector	조건 첫 번째	가능	단일 요소
querySelectorAll	조건 전체	가능	NodeList

CSS 선택자 문법의 자유도와 범용성을 고려하면 querySelector()가 대부분의 상황에 적합하다.

반응형

querySelector를 사용한 인터랙션 구현 기법

버튼 클릭 시 스타일 변경

const btn = document.querySelector('.toggle-btn');
btn.addEventListener('click', () => {
  btn.classList.toggle('active');
});

리스트 항목 선택 시 강조 처리

const items = document.querySelectorAll('.list-item');
items.forEach(item => {
  item.addEventListener('click', () => {
    document.querySelector('.list-item.selected')?.classList.remove('selected');
    item.classList.add('selected');
  });
});

다크모드 토글

const toggle = document.querySelector('#dark-mode-toggle');
toggle.addEventListener('change', () => {
  document.body.classList.toggle('dark');
});

반응형

querySelector와 관련된 브라우저 호환성 및 한계

브라우저 지원

querySelector()는 IE8 이상을 포함한 모든 주요 브라우저에서 지원된다. 따라서 구형 브라우저에 대한 걱정 없이 사용할 수 있다.

제한사항 및 주의점

• querySelector()는 항상 첫 번째 요소만 반환
• 선택자가 잘못되면 null 반환
• 동적 UI에서는 MutationObserver 또는 이벤트 위임 기법과 함께 사용 필요

반응형

querySelector 활용 최적화 팁

1. 선택자 단순화

복잡한 선택자보다 ID나 명확한 클래스명을 사용하는 것이 더 빠르고 유지보수에 유리하다.

//  비효율적인 예
document.querySelector('div.main > ul > li:nth-child(3)');

//  효율적인 예
document.querySelector('#main-item');

2. 캐싱 활용

반복 접근이 필요한 요소는 변수에 캐싱하여 활용하는 것이 성능에 이롭다.

const el = document.querySelector('.reused-element');
// 이후 여러 번 사용
el.style.display = 'block';

3. 이벤트 위임과 함께 사용

document.querySelector('.list').addEventListener('click', (e) => {
  if (e.target.matches('.list-item')) {
    e.target.classList.add('clicked');
  }
});

반응형

결론

JavaScript의 querySelector()는 현대 프론트엔드 개발의 필수 도구다. 다양한 CSS 선택자와의 결합으로 정밀한 DOM 제어가 가능하며, 유연하고 직관적인 코딩을 가능하게 한다. 위에서 설명한 기본 문법, 활용 예시, 성능 최적화 전략을 바탕으로 효율적인 사용자 인터페이스를 구성하고 유지관리성 높은 웹 페이지를 구현할 수 있다.