JavaScript2_css선택자로 태그 선택하기

✔️css 선택자로 태그 선택하기(querySelector)

const myTag = document.querySelector('#myNumber');//css선택자로 id 선택할땐 # 기호 사용
console.log(myTag);

const myTag2 = document.getElementById('myNumber');
console.log(myTag);

//2,3번줄과 5,6번 줄은 같음. 검사 들어가서 확인하면 같은 결과 두번 출력

✔️여러개의 태그 선택하기(querySelectorAll)

const myTag3 = document.querySelector('.color-btn');//class는 앞에 . 붙임
console.log(myTag3);

const myTag1 = document.querySelectorAll('.color-btn');
console.log(myTag1);
//14,15번과 17,18번은 같음(안에 있는 요소 똑같음)
const myTags2 = document.getElementsByClassName('color-btn');
console.log(myTags2);

getElement 방식과 querySelector 방식이 있는데 둘중 어느 방법을 사용해도 문제 될 건 없겠지만 메소드 이름 자체가 짧기도 하고 조금 더 활용도가 높은 querySelector 사용을 추천함.(그래도 다른 사람이 작성한 코드를 확인할 때를 대비해서 getElements를 통해 태그를 선택할 수 있다는 부분도 잊지 말고 꼭 기억해두기)

✔️querySelector와 querySelectorAll 정리

css 선택자를 활용해서 태그를 선택하는 메소드는 document 객체의 querySelector와 querySelectorAll 두 가지가 있다.

하나의 요소를 선택할 때는 querySelector를 사용하는데,
그래서 querySelector('#ID')는 getElementById('ID')와 같은 결과를 리턴합니다.
❗한가지 주의해야 할 부분은 querySelector 메소드를 활용할 때 클래스나 태그 이름처럼 여러 개의 요소가 존재하는 선택자를 쓰더라도 그 중 ⭐가장 첫번째 요소 하나만 선택한다는 점, 이 부분도 잘 기억하기!
getElementById와 동일하게 querySelector 메소드를 활용해 존재하지 않는 요소를 선택할 경우에는 null 값을 리턴한다.

그리고 여러 개의 요소를 선택할 때는 querySelectorAll을 사용한다.
여러 개의 요소가 선택되기 때문에 NodeList라는 이름의 유사 배열에 각 요소가 담긴다.
❗querySelectorAll를 사용할 때 주의해야 할 부분은 만약 존재하지 않는 요소를 선택할 경우,
undefined나 null 값이 리턴되는 것이 아니라 그냥 비어있는 NodeList가 리턴됨.