[Javascript] querySelector(), querySelectorAll()

JavaScript로 HTML의 요소를 제어하기 위해 Web API를 이용하여 요소를 선택해야한다.
그 중 하나인 querySelector에 대해 알아보자.

✨ querySelector()
입력한 선택자와 일치하는 문서 내의 첫 번째 element를 반환
일치하는 요소가 없다면 null을 반환한다.

✨예시✨
🔴 document.querySelector("span") [ css요소반환 ]
🟠 document.querySelector(".클래스") [ class반환 ]
🟡 document.querySelector("#아이디") [ id 반환 ]

---

✨ querySelectorAll()
주어진 CSS 선택자와 일치하는 모든 요소를 리스트로 반환
=> 인덱스를 통해 조작가능

---

🧨[참고]getElementBy~ 그리고 querySelector 차이점

같은 기능을 하는 getElementBy~ 그리고 querySelector 차이가 있을까?
=> 있다고 합니다.

getElementsByClassName ➡️ HTMLCollection에 리턴
querySelectorAll ➡️ NodeList에 리턴

🫥그렇다면, HTMLcollection은 뭐고 NodeList는 무엇인가??

1. 둘 다 배열과 같이 각 항목을 접근하기 위한 인덱스를 제공
2. HTMLCollection의 항목은 name, id 속성으로도 접근이 가능
3. NodeList의 항목은 인덱스 번호로만 접근이 가능하다.

결론:
querySelector : 더 구체적인 엘리먼트를 선택
getElementByID : 더 빠르고 호환이 더 잘 됨

---

차이점에 대해 정리가 아주 잘 된 글이 있어서 소개하고 싶어요
https://seokzin.tistory.com/entry/JavaScript-getElementById%EC%99%80-querySelector-%EC%B0%A8%EC%9D%B4%EC%A0%90

참고 : https://velog.io/@chloeee/getElementById-%EA%B7%B8%EB%A6%AC%EA%B3%A0-querySelector-%EC%B0%A8%EC%9D%B4%EC%A0%90