[Javascript] querySelector & querySelectorAll

querySelector

• 정의
  **querySelector는 CSS 선택자를 사용하여 **문서에서 첫 번째로 일치하는 요소를 반환합니다. 요소를 찾지 못하면 null을 반환합니다.
• 사용법
  **document.querySelector(cssSelector)** 형식으로 사용하며, cssSelector는 CSS 스타일의 선택자 문자열입니다.

예시

HTML 문서에서 첫 번째로 발견되는 class가 example인 요소를 선택합니다.

<div class="example">첫 번째 예제</div>
<div class="example">두 번째 예제</div>

const firstExample = document.querySelector(".example");
console.log(firstExample.textContent); // "첫 번째 예제"

반응형

querySelectorAll

• 정의: querySelectorAll은 주어진 CSS 선택자에 일치하는 문서 내 모든 요소의 정적(NodeList가 아닌) NodeList를 반환합니다. 일치하는 요소가 없으면 빈 NodeList를 반환합니다.
• 사용법: document.querySelectorAll(cssSelector) 형식으로 사용합니다.

예시

HTML 문서 내에서 class가 example인 모든 요소를 선택합니다.

<div class="example">첫 번째 예제</div>
<div class="example">두 번째 예제</div>

const allExamples = document.querySelectorAll(".example");
allExamples.forEach(el => {
    console.log(el.textContent);
});
// 출력:
// 첫 번째 예제
// 두 번째 예제

사용 시 주의점

• querySelectorAll 반환값: querySelectorAll이 반환하는 NodeList는 정적이므로, NodeList를 생성한 후 DOM이 변경되더라도 NodeList의 내용은 업데이트되지 않습니다.
• CSS 선택자: querySelector와 querySelectorAll 모두 CSS 선택자를 사용하므로, 유효한 CSS 선택자 문자열을 인자로 제공해야 합니다.
• 성능 고려: 빈번한 DOM 접근은 성능에 영향을 줄 수 있으니, 필요한 경우에만 사용하고 결과를 캐싱하는 것이 좋습니다.