querySelector는 CSS와 똑같은 선택자로 엘리먼트를 지정할 수 있는 함수입니다.
CSS에서
#node .top .class 라는 선택자가 있다면
querySelector에도 똑같이
querySelector('#node .top .class');로 지정하여 담아둘 수 있습니다.
반면에 getElementId는 id만을 지정합니다.
CSS에서 #node 라는 선택자가 있다면
getElementId('node');이렇게 지정할 수 있습니다.
두 함수를 쓸 때 주의해야 할 점은,
querySelector는 CSS 선택문자인 #이나 .을 같이 써서 '#node .class' 이렇게 쓰이는데 비해
getElementId는 id의 이름만 들어가므로 특수문자가 들어가지 않는다는 것만 알아두시기 바랍니다.
그리고 어떤 함수를 쓰든 상관은 없으나, 편의를 위해 querySelector가 자주 쓰이는 편입니다.
IE8 이하에서는 쓸 수 없어 Polyfill을 사용해야 하지만 현재 추세로는 IE8 이하의 대응을 하지 않는 시대라서 크게 상관은 없을 듯 합니다.
클래스를 지정하여 여러 엘리먼트를 선택하고 싶을 경우
querySelectorAll 함수를 사용합니다.