getElementById, querySelector, querySelectorAll

VanilaJS는 기본적으로 html에 동적인 작동을 추가하는 역할을 한다. 그러기 위해서는 우선 html의 각 태그에 접근할 수 있어야 하는데, 이런 역할을 하는 것이 바로 getElementById와 querySelector, querySelectorAll이다.

getElementById는 html의 각 성분을 id를 이용해 찾는 함수이다. html의 태그에는 id라는 속성을 넣을 수 있는데, 이 id는 웹 페이지 안에 같은 값이 두 개 이상 중복해서 들어갈 수 없다. 따라서 이 id를 이용해 값을 찾으면 페이지에 있는 성분을 중복 없이 최대 하나 가져올 수 있다.

querySelector는 getElementById와는 다르게, id가 아닌 각 태그의 정보를 이용해 찾는 함수이다. 이 정보는 태그 그 자체뿐 아니라 클래스, id, 그리고 각 태그의 속성을 쿼리로 이용한다. 단, 같은 조건의 태그가 여러 개 있다면 가장 먼저 발견한 태그를 가져오게 된다.

querySelectorAll은 querySelector와 이용 방법이 같지만, 쿼리에 맞는 태그를 하나만 가져오는 것이 아니라 리스트의 형태로 묶어서 가져온다.

See the Pen Untitled by Themion (@themion) on CodePen.

위 예제를 보면, getElementById를 이용해 첫 번째 span의 값을 바꿨고, querySelector를 이용해 두 번째 span의 값을 바꿨지만 세 번째는 바꾸지 못하였다. 마지막으로 querySelectorAll을 이용해 네 번째와 다섯 번째 span의 값을 바꾼 것을 볼 수 있다.