querySelector

document.querySelector() // html tag 선택 방식

<button>입력<button>
document.querySelector('button'); // html button tag 선택방식

<button>입력</button>
<button>버튼2</button>
<button>버튼3</button>
document.querySelectorAll('button'); // html button tag를 한번에 선택하는 방식

document.querySelector('#아이디'); // html tag에 id값 선택할 때 사용하는 방식 #을 씀.

document.querySelector('.클래스'); // html tag에 class 값 선택할 때 사용하는 방식 '.'을 씀.
document.querySelectorAll('.클래스'); // html tag에 여러 class 값 선택할 때 querySelectorAll 사용. 

<div><span id="order">1</span>번째 참가자</div>
  document.querySelector('div span') // 한칸이 띄어져있는데 띄어쓰기가 특징 이 뜻은 div에 자손인 span을 찾아라. 즉, div가 부모인 span을 가르키는 것, 증손자 고손자도 가능.