querySelectorAll() 에서 query란?

document.querySelectorAll('li')[0]

 

query

= DOM에게 묻는 “질문(Query)”

= “이 조건에 맞는 요소들 좀 찾아줘”

 

querySelectorAll("div")

= 이 선택자로 전부 찾아줘

 

query + selector + all

• query : 검색하다 / 질의하다
• selector : 선택 조건
• all : 전부

---

4️⃣ 예시로 감 잡기

 

document.querySelectorAll(".item");

“class가 item인 애들 다 찾아줘”

 

document.querySelectorAll("#login button");

“id가 login인 애 안에 있는 button 찾아줘”

 

document.querySelectorAll("input[type='text']");

“text 타입 input 찾아줘”

---

5️⃣ 왜 query라는 단어를 썼을까?

비슷한 개념들이 있어 👇

• SQL query
• 검색엔진 query
• GraphQL query

공통점:

“조건을 주고 → 결과를 받아온다”

 

DOM도 똑같음:

• 조건(CSS 선택자)을 주고
• DOM 트리에서
• 맞는 요소를 찾아서 반환

---

728x90

6️⃣ querySelector vs querySelectorAll

메서드의미

querySelector	첫 번째 하나
querySelectorAll	조건에 맞는 모든 것

 

document.querySelector(".item"); // 1개 document.querySelectorAll(".item"); // 여러 개

---

7️⃣ 한 줄 요약

• query = “검색 조건”
• 실제로는 CSS selector
• DOM에게 “이 조건에 맞는 요소 찾아줘”라고 묻는 것

---

지금 질문 흐름 보면
👉 JS 문법 + 브라우저 DOM 구조 같이 공부 중인 느낌인데 😄

원하면 다음도 이어서 설명해줄게:

• CSS selector 한 번에 정리
• querySelectorAll 결과(NodeList) 다루는 법
• 옛날 getElementById랑 차이