querySelector()와 querySelectorAll() 메서드는 JavaScript에서 DOM(Document Object Model)에서 요소를 선택하는 데 사용됩니다.

querySelector()

정의

정의: 이 메서드는 특정 CSS 선택자와 일치하는 첫 번째 요소를 선택하는 데 사용됩니다. 제공된 CSS 선택기와 일치하는 문서에서 첫 번째 요소를 반환합니다.

목적

목적: 문서에서 하나의 DOM 요소를 찾아서 조작하고자 할 때 사용됩니다.

사용법 및 예시

• 사용법:

  const element = document.querySelector('CSS 선택자');

• 예시:

  const firstParagraph = document.querySelector('p'); // 첫 번째 <p> 요소를 선택합니다.

querySelectorAll()

정의

• 정의: 이 메서드는 특정 CSS 선택자와 일치하는 모든 요소를 선택하는 데 사용됩니다. 제공된 CSS 선택자와 일치하는 문서에서 요소들의 NodeList(일반적으로 유사 배열 객체인 노드 컬렉션)을 반환합니다.

목적

• 목적: 문서에서 여러 DOM 요소를 찾아 조작하고자 할 때 사용됩니다.

사용법 및 예시

• 사용법:

  const elements = document.querySelectorAll('CSS 선택자');

• 예시:

  const allParagraphs = document.querySelectorAll('p'); // 모든 <p> 요소를 선택합니다.

querySelector()과 querySelectorAll()의 차이점

• querySelector()는 CSS 선택자와 일치하는 첫 번째 요소만 반환합니다. 단일 요소를 선택할 때 유용합니다.
• querySelectorAll()은 CSS 선택자와 일치하는 모든 요소를 NodeList에 담아 반환합니다. 여러 요소를 처리하고 선택한 모든 요소에 대해 작업할 때 유용합니다.