CSS selector을 이용한 노드 선택 (querySelector)

node를 선택하는 방법 중에는 getElementById, getElementsByTagName, getElementsByClassName 등 여러 가지가 있는데 이중에 비교적 최신에 나온 querySelector에 대해 알아보고자 한다. querySelector과 querySelectorAll로 나누어지는데 querySelector은 한 개의 노드만 호출하는 것이고 querySelectorAll은 한 개 이상의 노드들을 배열로 호출하는 것이다. querySelector을 사용하기 위해선 CSS selector 기본을 알고 있어야 사용하기 편한데, 간단히 몇 가지만 짚고 넘어가도록 한다. 

 

.name    name이란 클래스를 가진 노드

#name   name이란 아이디를 가진 노드

input[name='x']    input 태그 중에 name이란 속성이 'x'인 노드

 

CSS selector을 이용한 querySelector 간단한 예제

 

예제에서는 버튼을 눌러 input의 속성들을 변화 시키는 것을 할 것이다. 

 

예제

25~27번 줄에서는 id 가 change인 노드가 클릭되면 id가 input1인 노드의 값을 querySelector1로 바꾸어준다.

29~31번 줄에서는 class가 btn1인 노드가 클릭되면 id가 input2인 노드의 값을 querySelector2로 바꾸어준다.

33~35번 줄에서는 input 태그들 중에 name 속성이 x인 노드가 클릭되면 id가 input3인 노드의 값을 querySelector3로 바꾸어준다.

37~43번 줄에서는 class가 btn3인 노드가 클릭되면 class가 first-section인 노드들의 배경색을 for loop 안에서 노란색으로 바꾸어준다.

 

모든 버튼이 눌러진 결과