내가 원하는 HTML 요소를 찾는다 🔥

const myButton = document.querySelector**('.my-button')**;

querySelector : 선택자

querySelector 안의 인자로 넘기는 부분은 완전 CSS의 영역이다.

const fourthButton = document.querySelector('button:nth-child(4)');

// 속성이 뭐인 버튼 찾을 수 있음.
const fourthButton = document.querySelector('button[type="submit"]');

이런것도 가능함!

<aside> 💡 주의할점 : querySelector는 무조건 요소 하나만 찾는다!

</aside>

querySelector는 바디에 있는 요소를 찾는데, 첫번째 요소만을 가져온다!

const myButtons = document.querySelectorAll('.my-button');

// 이런것도 가능함..
const myButtons = document.querySelectorAll('.my-button:nth-child(2n+1)');

이런것 전에

getElementById

getElementsByClassName