JavaScript에서 querySelector 및 querySelectorAll 익히기

JavaScript의 querySelector 및 querySelectorAll

querySelector 및 querySelectorAll 메소드는 DOM에서 요소를 선택하기 위한 JavaScript의 강력한 도구입니다. 이를 통해 개발자는 CSS 선택기를 사용하여 HTML 요소를 식별하고 조작할 수 있습니다.

---

1. 쿼리선택기

querySelector 메소드는 지정된 CSS 선택기와 일치하는 첫 번째 요소를 선택합니다.

구문:

document.querySelector(selector);

• selector: CSS 선택기를 나타내는 문자열(예: "#id", ".class", "tag").

예:

<div>





<pre class="brush:php;toolbar:false">const firstText = document.querySelector(".text");
console.log(firstText.textContent); // Output: First paragraph

---

2. 쿼리선택기모두

querySelectorAll 메소드는 지정된 CSS 선택기와 일치하는 모든 요소를 선택하고 이를 NodeList로 반환합니다.

구문:

document.querySelectorAll(selector);

• selector: CSS 선택기를 나타내는 문자열입니다.

예:

const allTexts = document.querySelectorAll(".text");
allTexts.forEach((text) => console.log(text.textContent));
// Output:
// First paragraph
// Second paragraph

NodeList의 요소에 액세스:

const secondText = allTexts[1];
console.log(secondText.textContent); // Output: Second paragraph

---

3. querySelector와 querySelectorAll의 차이점

기능 쿼리선택기 querySelectorAll

Feature	querySelector	querySelectorAll
Result	First matching element	All matching elements
Return Type	Single DOM element	NodeList (array-like structure)
Iteration	Not iterable	Iterable (e.g., using forEach)
Use Case	When one element is needed	When multiple elements are needed

결과 첫 번째 일치 요소 일치하는 모든 요소 반환 유형 단일 DOM 요소 NodeList(배열과 유사한 구조) 반복 반복 불가능 반복 가능(예: forEach 사용) 사용 사례 한 요소가 필요한 경우 여러 요소가 필요한 경우

---

4. 선택기 결합

더 구체적인 쿼리를 위해 CSS 선택기를 결합할 수 있습니다.

예:

document.querySelector(selector);

---

5. 일반적인 사용 사례

ID로 선택:

<div>





<pre class="brush:php;toolbar:false">const firstText = document.querySelector(".text");
console.log(firstText.textContent); // Output: First paragraph

클래스별 선택:

document.querySelectorAll(selector);

태그 이름으로 선택:

const allTexts = document.querySelectorAll(".text");
allTexts.forEach((text) => console.log(text.textContent));
// Output:
// First paragraph
// Second paragraph

속성 선택기:

const secondText = allTexts[1];
console.log(secondText.textContent); // Output: Second paragraph

N번째 하위 선택기:

const containerParagraph = document.querySelector("#container .text");
console.log(containerParagraph.textContent); // Output: First paragraph

---

6. querySelectorAll에서 요소 반복

querySelectorAll이 NodeList를 반환하므로 forEach, for...of 또는 인덱싱을 사용하여 이를 반복할 수 있습니다.

예:

const header = document.querySelector("#header");

---

7. 라이브 컬렉션과 정적 컬렉션

• querySelectorAll은 정적 NodeList를 반환합니다. 즉, DOM이 변경되어도 업데이트되지 않습니다.
• 라이브 컬렉션에는 getElementsByClassName 또는 getElementsByTagName을 사용하세요.

예:

const buttons = document.querySelectorAll(".button");

---

8. 오류 처리

일치하는 요소가 없는 경우:

• querySelector: null을 반환합니다.
• querySelectorAll: 빈 NodeList를 반환합니다.

예:

const paragraphs = document.querySelectorAll("p");

---

9. 요약

• 단일 요소를 선택하려면 querySelector를 사용하고 여러 요소를 선택하려면 querySelectorAll을 사용하세요.
• 두 가지 방법 모두 정확한 타겟팅을 위한 강력한 CSS 선택기를 지원합니다.
• querySelectorAll은 쉽게 반복할 수 있는 정적 NodeList를 반환합니다.
• 현대 DOM 조작을 위한 다용도 도구이며 getElementById 또는 getElementsByClassName과 같은 이전 메소드보다 선호되는 경우가 많습니다.

이러한 방법을 익히면 JavaScript 코드가 더 깔끔하고 효율적으로 만들어집니다!

안녕하세요. 저는 Abhay Singh Kathayat입니다!
저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다.
제 비즈니스 이메일인 kaashshorts28@gmail.com으로 언제든지 연락주세요.