JavaScript querySelector 설명: 구문, 고급 선택자, 모범 사례 및 예시

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

translation.

1. 소개: querySelector란?

querySelector의 기본 개요와 역할

querySelector는 지정된 선택자와 일치하는 첫 번째 요소를 반환하는 메서드입니다.

아래 예제를 살펴보세요.

const element = document.querySelector('.example');
console.log(element);

이 코드는 클래스 이름이 example인 첫 번째 요소를 가져옵니다.

같은 선택자에 대해 여러 요소가 존재하더라도 첫 번째로 일치하는 요소만 반환됩니다.

<div class="example">1</div>
<div class="example">2</div>

이 경우 <div class="example">1</div> 첫 번째 요소만 선택됩니다.

DOM 조작에서 querySelector가 중요한 이유

querySelector는 다음과 같은 상황에서 특히 유용합니다.

1. CSS 선택자를 이용한 유연한 요소 선택

• 클래스, ID, 속성, 의사 클래스 등 다양한 선택자를 지원합니다.

2. 복잡한 구조에서도 깔끔한 코드

• 중첩된 요소나 특정 속성을 가진 요소를 효율적으로 찾을 수 있습니다.

3. 일관된 최신 JavaScript 스타일

• getElementById나 getElementsByClassName보다 다재다능하며, 최신 JavaScript 패턴과 잘 어울립니다.

다음은 폼 안에 있는 특정 버튼을 선택하는 예시입니다.

const submitButton = document.querySelector('form button[type="submit"]');
console.log(submitButton);

이 코드는 폼 내부의 submit 버튼만 선택합니다.

querySelector와 querySelectorAll의 차이점

querySelector가 첫 번째 일치 요소만 반환하는 반면, querySelectorAll은 NodeList 형태로 모든 일치 요소를 반환합니다.

const elements = document.querySelectorAll('.example');
console.log(elements);

이 코드는 클래스 이름이 example인 모든 요소를 가져옵니다.

요약

이 섹션에서는 JavaScript의 querySelector 메서드에 대한 기본 개념과 역할을 설명했습니다.

핵심 정리:

1. CSS 선택자를 사용해 요소를 유연하게 선택할 수 있다
2. querySelector는 첫 번째 일치 요소만 반환하고, querySelectorAll은 모든 일치 요소를 반환한다
3. 간결하고 효율적인 DOM 조작을 위한 중요한 메서드이다

다음 섹션에서는 querySelector의 기본 문법과 실용적인 사용 예제를 자세히 살펴보겠습니다.

2. querySelector의 기본 문법 및 사용법

기본 문법

querySelector의 기본 문법은 다음과 같습니다:

document.querySelector(selector);

• 인자 : CSS 선택자 문자열
• 반환값 : 선택자와 일치하는 첫 번째 요소. 일치하는 요소가 없으면 null을 반환합니다.

예시: 기본 요소 선택

1. ID로 선택 ID는 고유하므로 정확히 하나의 요소를 신뢰 있게 선택할 수 있습니다.

   const element = document.querySelector('#header');
   console.log(element);
   

이 코드는 ID가 header인 요소를 선택합니다.

2. 클래스로 선택 클래스 이름을 지정하면 첫 번째 일치 요소만 반환됩니다.

   const element = document.querySelector('.content');
   console.log(element);
   

이 코드는 클래스 이름이 content인 첫 번째 요소를 선택합니다.

3. 태그 이름으로 선택 태그 이름을 지정해 요소를 선택할 수도 있습니다.

   const element = document.querySelector('p');
   console.log(element);
   

이 코드는 페이지에서 첫 번째 <p> 태그를 선택합니다.

결합 선택자를 이용한 요소 선택

CSS 선택자를 조합하면 요소를 보다 유연하게 타깃팅할 수 있습니다.

1. 중첩 선택자 부모‑자 관계를 지정해 요소를 선택합니다.

   const element = document.querySelector('div.container p');
   console.log(element);
   

이 코드는 클래스 이름이 container인 <div> 안에 있는 첫 번째 <p> 태그를 선택합니다.

2. 속성 선택자 특정 속성을 가진 요소를 선택합니다.

   const element = document.querySelector('input[type="text"]');
   console.log(element);
   

이 코드는 type 속성이 text인 첫 번째 <input> 요소를 선택합니다.

3. 의사 클래스 사용 의사 클래스를 사용하여 특정 상태나 위치에 있는 요소를 선택합니다.

   const element = document.querySelector('li:first-child');
   console.log(element);
   

이 코드는 첫 번째 <li> 요소를 선택합니다.

querySelector가 요소를 찾을 수 없을 때 해야 할 일

querySelector는 일치하는 요소가 없을 때 null을 반환합니다. 이 때문에 요소를 선택한 후 요소가 존재하는지 확인하는 것이 중요합니다.

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
} else {
  console.log('Element not found');
}

이 코드는 요소가 존재하지 않더라도 오류를 발생시키지 않고 안전하게 작동합니다.

요약

이 섹션에서 querySelector의 기본 구문과 사용법을 다루었습니다.

빠른 복습:

1. ID, 클래스 또는 태그 이름으로 요소를 쉽게 선택할 수 있습니다
2. 복잡한 선택자와 의사 클래스를 조합하여 유연하게 요소를 선택할 수 있습니다
3. 누락된 요소에 대한 오류 처리도 중요합니다

다음 섹션에서는 더 강력한 선택자를 사용한 고급 사용 예를 살펴보겠습니다.

3. 고급 예제: 더 강력한 선택자 사용 방법

속성 선택자로 특정 요소 선택

속성 선택자는 특정 속성이나 값을 가진 요소를 유연하게 선택할 수 있게 합니다.

1. 특정 속성 값을 가진 요소 선택

   const checkbox = document.querySelector('input[type="checkbox"]');
   console.log(checkbox);
   

이 코드는 type 속성이 checkbox인 첫 번째 <input> 요소를 선택합니다.

2. 속성 값의 부분 일치 사용

   const link = document.querySelector('a[href^="https://"]');
   console.log(link);
   

이 코드는 href 속성이 https://로 시작하는 링크를 선택합니다.

일반적으로 사용되는 속성 선택자:

의사 클래스와 의사 요소를 사용한 선택

의사 클래스와 의사 요소는 특정 상태나 위치에 있는 요소를 쉽게 선택할 수 있게 합니다.

1. 상태를 위한 의사 클래스

   const activeLink = document.querySelector('a.active');
   console.log(activeLink);
   

이 코드는 active 클래스를 가진 링크를 선택합니다.

2. 위치를 위한 의사 클래스

   const firstItem = document.querySelector('ul > li:first-child');
   console.log(firstItem);
   

이 코드는 목록의 첫 번째 항목을 선택합니다.

일반적으로 사용되는 의사 클래스:

복합 선택자를 사용한 세밀한 필터링

여러 선택자를 조합하여 더 복잡한 조건을 표현할 수도 있습니다.

1. 부모-자식 관계로 필터링

   const nestedElement = document.querySelector('div.container > p.text');
   console.log(nestedElement);
   

이 코드는 container 클래스를 가진 div 요소 내부의 text 클래스를 가진 첫 번째 p 요소를 선택합니다.

2. 여러 조건 조합

   const inputField = document.querySelector('input[type="text"].required');
   console.log(inputField);
   

이 코드는 type="text"을 가지며 required 클래스도 가진 첫 번째 <input> 요소를 선택합니다.

요약

이 섹션에서 querySelector를 사용한 고급 선택자 사용법을 설명했습니다.

주요 포인트:

1. 속성 선택자는 요소를 유연하게 필터링할 수 있게 합니다
2. 의사 클래스와 의사 요소는 상태와 위치를 타겟팅할 수 있게 합니다
3. 복합 선택자는 세부적인 조건을 지정하고 복잡한 대상을 쉽게 선택할 수 있게 합니다

다음 섹션에서는 querySelector를 사용할 때 중요한 주의사항과 모범 사례를 다루겠습니다.

4. querySelector 사용 시 주의사항과 모범 사례

오류 처리와 null 확인

지정된 선택자와 일치하는 요소가 없으면 querySelector는 null을 반환합니다. 따라서 요소를 조작하기 전에 항상 요소가 존재하는지 확인해야 합니다.

예제: null 확인 구현

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
  element.textContent = 'New text';
} else {
  console.log('Element not found');
}

이 코드는 요소가 존재하지 않더라도 안전하게 오류를 방지합니다.

특수 문자 이스케이프

선택자에 특수 문자가 포함되어 있으면, 올바르게 이스케이프하지 않을 경우 querySelector가 오류를 발생시킬 수 있습니다.

예시: 특수 문자를 포함하는 요소 선택

HTML:

<div id="my.id">Special ID</div>

JavaScript:

const element = document.querySelector('#my\.id');
console.log(element);

특수 문자(예: ., #, [, ] 등)를 처리할 때는 백슬래시(\)를 사용해 이스케이프합니다.

성능 고려 사항

1. 깊게 중첩된 선택자 피하기 선택자가 복잡해질수록 브라우저가 대상 요소를 찾는 데 시간이 더 걸릴 수 있습니다. 가능한 한 간단한 선택자를 사용하세요.

권장되지 않음

const element = document.querySelector('div.container > ul > li.item > span.text');

권장됨

const container = document.querySelector('.container');
const textElement = container.querySelector('.text');

2. 여러 요소를 효율적으로 선택하기 querySelectorAll을 사용해 모든 대상 요소를 가져온 뒤 필요에 따라 필터링합니다.

   const items = document.querySelectorAll('.item');
   items.forEach((item) => {
     console.log(item.textContent);
   });
   

모범 사례

1. 구체적인 선택자 사용 의도한 요소만 선택하도록 구체적인 선택자를 사용합니다.

   const button = document.querySelector('button.submit');
   

2. 일관된 명명 규칙 사용 CSS 클래스명과 ID를 일관된 규칙으로 설계해 선택자의 가독성을 높입니다.
3. 재사용 가능한 코드에 집중 특정 요소를 자주 선택한다면, 로직을 재사용 가능한 함수로 감싸는 것이 편리합니다.

   function getElement(selector) {
     const element = document.querySelector(selector);
     if (!element) {
       console.warn(`Element not found: ${selector}`);
     }
     return element;
   }
   
   const header = getElement('#header');
   

요약

이 섹션에서는 querySelector를 사용할 때의 주요 주의사항과 효율적인 방법을 다루었습니다.

핵심 포인트:

1. null 체크를 일관되게 수행해 오류 방지
2. 특수 문자를 포함하는 선택자를 올바르게 이스케이프
3. 성능을 고려해 선택자를 간단히 설계
4. 함수와 명명 규칙을 사용해 재사용성과 가독성 향상

다음 섹션에서는 실제 프로젝트에 유용한 실용적인 예시들을 소개합니다.

5. 자주 묻는 질문(FAQ) 및 해결책

querySelector와 getElementById의 차이점은 무엇인가요?

질문:
querySelector와 getElementById는 모두 요소를 선택할 수 있습니다. 두 메서드의 차이점은 무엇인가요?

답변:

사용 비교:

// With querySelector
const element1 = document.querySelector('#example');

// With getElementById
const element2 = document.getElementById('example');

어떤 것을 사용해야 할까요?

• 간단한 ID 기반 선택의 경우, getElementById가 빠르고 권장됩니다.
• 유연한 선택자 기반 타깃팅이 필요할 때는 querySelector를 사용합니다.

왜 때때로 querySelector가 작동하지 않을까요?

질문:
코드는 올바르게 보이는데도 querySelector가 작동하지 않습니다. 이유가 무엇일까요?

답변:

1. 요소가 아직 DOM에 존재하지 않음

• 스크립트가 실행될 때 DOM이 완전히 로드되지 않았을 수 있습니다. 해결책 : DOMContentLoaded 이벤트를 사용하세요.

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.example');
    console.log(element);
  });
  

2. 선택자가 올바르지 않음

• 클래스명이나 ID가 잘못되었을 수 있습니다.

확인할 사항:

• 브라우저 개발자 도구에서 선택자를 확인하세요.

  const element = document.querySelector('.my-class');
  console.log(element); // Check the result in DevTools
  

3. 요소가 동적으로 추가됨

• JavaScript를 통해 요소가 동적으로 추가되면, 처음 선택하려 할 때 요소가 존재하지 않을 수 있습니다.

솔루션:
동적으로 추가된 요소를 처리하기 위해 부모 요소에 이벤트 리스너를 연결하세요.

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-element')) {
    console.log('Clicked');
  }
});

동적으로 추가된 요소에 접근하는 방법

질문:
querySelector로 동적으로 추가된 요소를 선택할 수 있나요?

답변:
네, 가능합니다. 그러나 요소가 추가되는 시점의 타이밍에 주의해야 합니다.

솔루션 1: 동적 요소 관찰

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const newElement = document.querySelector('.dynamic-element');
      if (newElement) {
        console.log('A new element was added:', newElement);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

솔루션 2: setTimeout 또는 setInterval 사용

요소가 일정 지연 후에 추가된다면, 다음과 같이 모니터링할 수 있습니다:

setTimeout(() => {
  const dynamicElement = document.querySelector('.dynamic-element');
  console.log(dynamicElement);
}, 1000); // Check for the element after 1 second

요약

이 섹션에서 querySelector 사용에 대한 일반적인 질문과 문제 해결 팁을 다루었습니다.

빠른 요약:

1. querySelector vs. getElementById 를 언제 사용하는지 이해하세요.
2. 작동하지 않으면 DOM 로딩 타이밍과 선택자 실수를 확인하세요.
3. 동적 요소의 경우 이벤트 위임 또는 MutationObserver를 사용하세요.

다음 섹션에서 querySelector를 효과적으로 사용하는 주요 포인트를 요약하겠습니다.

6. 실제 프로젝트에서 querySelector 사용하기: 실전 예제

폼 입력 값 가져오기 및 유효성 검사

시나리오: 사용자가 폼에 값을 입력할 때 이를 가져와서 유효성 검사를 수행합니다.

HTML

<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <input type="email" id="email" placeholder="Email address">
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.querySelector('#userForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent form submission

  const username = document.querySelector('#username').value;
  const email = document.querySelector('#email').value;

  if (!username) {
    alert('Please enter a username');
    return;
  }

  if (!email.includes('@')) {
    alert('Please enter a valid email address');
    return;
  }

  alert('The form was submitted successfully');
});

주요 포인트:

• 입력 값을 가져오기 위해 value 속성을 사용하세요.
• 사용자 입력에 간단한 유효성 검사 체크를 수행하세요.
• 폼 제출 동작을 사용자 지정하기 위해 이벤트 리스너를 사용하세요.

동적으로 추가된 요소에 이벤트 리스너 추가하는 방법

시나리오: JavaScript를 통해 동적으로 추가된 요소에 이벤트 리스너를 적용합니다.

HTML

<div id="container">
  <button id="addButton">Add a button</button>
</div>

JavaScript

const container = document.querySelector('#container');
const addButton = document.querySelector('#addButton');

// Add a new button
addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.classList.add('dynamic-button');
  newButton.textContent = 'Click me!';
  container.appendChild(newButton);
});

// Capture events on the parent element
container.addEventListener('click', (event) => {
  if (event.target.classList.contains('dynamic-button')) {
    alert('The new button was clicked!');
  }
});

주요 포인트:

• 동적으로 추가된 요소는 직접 참조할 수 없으므로, 부모 요소에 이벤트 리스너를 붙이세요.
• event.target을 사용하여 클릭된 요소를 식별하세요.

모달 창 열기 및 닫기

시나리오: 모달 열기/닫기 동작 구현.

HTML

<div id="modal" class="modal hidden">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>This is the modal content.</p>
  </div>
</div>
<button id="openModal">Open modal</button>

CSS

.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

JavaScript

const modal = document.querySelector('#modal');
const openModal = document.querySelector('#openModal');
const closeModal = document.querySelector('#closeModal');

// Open the modal
openModal.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

// Close the modal
closeModal.addEventListener('click', () => {
  modal.classList.add('hidden');
});

// Close when clicking outside the modal
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hidden');
  }
});

핵심 포인트:

• classList를 사용하여 클래스 추가/제거 및 가시성 토글.
• 콘텐츠 영역 외부를 클릭할 때 모달이 닫히도록 하여 UX 개선.

요약

이 섹션에서 우리는 querySelector를 실제 개발 시나리오에서 사용하는 실용적인 예제를 소개했습니다.

배운 내용:

1. 사용자 입력을 검색하고 검증하여 안전한 폼 처리 구현 .
2. 이벤트 위임을 사용하여 동적으로 추가된 요소를 유연하게 처리 .
3. 모달 열기/닫기 동작 구현으로 UI 개선 .

이 예제들을 참조로 사용하고 자신의 개발 프로젝트에 적용하세요. 다음 섹션에서는 querySelector 사용의 핵심 포인트를 요약하여 기사를 마무리할 것입니다.

7. 요약: querySelector를 효과적으로 사용하는 핵심 포인트

이 기사에서 우리는 JavaScript의 querySelector 메서드를 기본부터 고급 사용 사례까지 자세히 다루었습니다. 마지막으로 가장 중요한 포인트를 검토하고 효과적으로 사용하는 방법을 요약하겠습니다.

querySelector의 핵심 역할

• 유연한 요소 선택 : CSS 선택자를 사용하여 DOM 요소를 효율적으로 선택할 수 있습니다.
• 간단한 구문 : 클래스 이름, ID, 태그 이름, 속성 선택자를 사용하여 요소를 직관적으로 선택할 수 있습니다.
• 동적 요소와 작동 : 부모 요소에 이벤트 리스너를 붙여 나중에 추가된 요소를 처리할 수 있습니다.

기본 구문 예제:

const element = document.querySelector('.example');

고급 사용법 및 중요한 고려사항

1. 고급 선택자 사용

• 속성 선택자와 의사 클래스를 사용하여 요소를 더 정확하고 유연하게 타겟팅할 수 있습니다.
• 예제 :

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

2. 성능을 고려한 코드 작성

• 가능한 한 간단한 선택자를 사용하여 처리 오버헤드를 줄이세요.
• 자주 사용되는 선택 로직을 재사용 가능한 함수로 만드세요.

2. 철저한 오류 처리

• null 검사를 수행하고 요소가 존재하지 않는 경우를 처리하세요.
• 예제 :

  const element = document.querySelector('.nonexistent');
  if (element) {
    console.log('Element found');
  } else {
    console.log('Element not found');
  }
  

실용적인 예제 검토

• 폼 유효성 검사 : 입력 값을 검증하여 안전한 폼 처리를 구현하세요.
• 동적 요소 처리 : JavaScript를 통해 생성된 요소를 유연하게 처리하세요.
• 모달 창 제어 : UI/UX를 개선하기 위해 상호작동적 동작을 추가하세요.

이러한 예시들을 통해 querySelector의 실용성과 확장성을 배웠습니다.

querySelector를 최대한 활용하는 팁

1. 개발 도구를 활용하세요

• 브라우저의 개발자 도구를 사용하여 선택자를 검증하고 테스트하세요.

1. 가독성을 우선시하세요

• 선택자 이름과 코드 구조를 이해하기 쉽게 설계하여 유지보수성을 향상시키세요.

1. 필요할 때 querySelectorAll을 함께 사용하세요

• 여러 요소를 다룰 때 querySelectorAll을 사용하여 효율적인 처리를 구현하세요.

요약

querySelector는 DOM 조작을 간단하고 효율적으로 만들어주는 강력한 메서드입니다.

이 기사의 주요 요점:

• 기본 사용법부터 고급 예시까지 구조화된 방식으로 이해할 수 있습니다.
• 선택자와 의사 클래스를 결합하여 더 유연하게 요소를 타겟팅할 수 있습니다.
• 오류를 적절히 처리하고 성능을 고려함으로써 더 실용적이고 안정적인 코드를 작성할 수 있습니다.

JavaScript에서 DOM 조작을 할 때 이 기사에서 소개된 기법을 적용하세요.

다음 단계로 DOM 조작에 대한 지식을 심화하고, querySelector를 다른 메서드와 결합하는 방법을 배우며 기술을 향상시키세요!