[Javascript - Q] Vanilla Javascript는 동일 class를 다중 선택하는 것이 불가능한가?

코딩애플(https://online.codingapple.com/) 자바스크립트 기초 수업을 들으며 생긴 의문.

7강 jQuery의 장점을 설명하는 중,

바닐라 자바스크립트는 클래스명으로 변경할 때 해당 클래스를 가진 요소 전부를 한번에 변경하는 것이 어려운 반면,
제이쿼리는 한 줄의 짧은 코드로 해당 클래스를 가진 요소 전부를 한번에 변경 할 수 있다고 했음.

ex)

document.getElementsByClassName('클래스명')[순서].~; //쌩자바스크립트는 대괄호[]를 사용해서 순서를 지정해줘야 함 
$('.클래스명').~~; //제이쿼리

이 경우, 바닐라 자바스크립트의 [순서] 부분에 [i]를 넣고 i>=0 이렇게 작성해서 반복하거나, 다른 방법을 사용해서 다중 선택 할 순 없을까?

 

결론

• .getElement~~가 아닌 .querySelector~를 이용해서 개별 또는 다중 선택 가능.
• .qurerySelecor의 경우 css처럼 .class, #id, tag 로 작성해서 불러낼 수 있고, .class tag와 같이 부모 형제 관계로도 표현 가능함.

document.querySelector(".클래스명"); //개별 선택의 경우. 동일한 클래스 중 가장 첫번째 element를 불러냄 
document.querySelectorAll(".클래스명"); //다중 선택의 경우. 동일한 클래스 모두를 불러냄