결론적으로 (왠만하면) 쓰지 말자.
querySelector로 들어오는 것이 여러 개라면 그 중 첫번째 엘리먼트 하나만 반환하기에 목적과 다른 엘리먼트가 선택될 수 있다.
querySelector()는 주는 인자에 따라 잘 필터링 해서 쓰면 원하는 것을 타겟할 수 있어 편리함이 존재하는 경우도 있다. 하지만 개발자는 타겟으로 한 무언가를 예외 없이 잘 처리하는 것이 일단 우선순위이다. 사용목적에 맞게 사용해야 한다. 둘다 원하는 기능에 동작할 수 있지만 예외상황과 추후상황을 미리 설정하여 사용해야 한다.
// id가 "myElement"인 요소를 선택합니다.
var elementById = document.querySelector('#myElement');
// 클래스가 "myClass"인 요소를 선택합니다.
var elementByClass = document.querySelector('.myClass');
// 태그 이름이 "div"이고 클래스가 "example"인 요소를 선택합니다.
var elementByTagAndClass = document.querySelector('div.example');
다음과 같이 잘 필터링 할 수도 있지만 일단은 여러개를 포착할 수 있다는 가능성과 그 중 하나만 가져온다는 가능성은 피하고 보는게 맞다.
반면 getElementId는 Id를 통해 엘리먼트를 반환한다. 만약 document에 구체적인 ID의 엘리먼트가 없다면 null을 반환한다.
심지어 getElementId가 더 빠르다. html에서 id는 고유하므로 unique 특성이 성립하므로 (동일한 id가 여러개라면 html 성립x) 중복선택에 대한 위험도 없다.