자바스크립트 querySelector

🔍 querySelector란?

querySelector는 CSS 선택자(CSS selector)를 사용해서 HTML 문서에서 첫 번째로 일치하는 요소를 반환하는 JavaScript 메서드다.

document.querySelector(selector);

• selector: 선택하고 싶은 요소의 CSS 선택자
• 반환값: 해당 요소를 나타내는 Element 객체 (없으면 null)

---

🧪 사용 예시

1. 아이디 선택

const title = document.querySelector("#main-title");

2. 클래스 선택

const button = document.querySelector(".submit-btn");

3. 태그 선택

const firstParagraph = document.querySelector("p");

4. 자식 요소 선택

const listItem = document.querySelector("ul li");

---

⚠️ 주의할 점

• querySelector는 첫 번째로 일치하는 요소 하나만 반환한다. 여러 개의 요소를 선택하려면 querySelectorAll을 사용해야 한다.
• 선택자가 잘못되었거나 해당 요소가 없으면 null을 반환하므로 null 체크가 필요할 수 있다.

---

🧠 함께 알아두면 좋은 것들

메서드	설명
querySelector	CSS 선택자를 이용해 첫 번째 요소를 선택
querySelectorAll	CSS 선택자를 이용해 모든 요소를 NodeList로 선택

---

✍️ 마무리

querySelector는 CSS 선택자 문법을 그대로 사용할 수 있어서 직관적이고 편리하다. HTML 구조를 잘 이해하고 있다면 원하는 요소를 쉽게 찾을 수 있어, DOM 조작의 필수 도구라고 할 수 있다.