[Javascript] querySelector, querySelectorAll 사용

01. querySelector

 - 지정된 선택자와 일치하는 Document의 첫 번째 element를 반환.

 - 만약 일치하는 요소가 없다면 null을 반환.

   

02. querySelectorAll

 - 지정된 셀렉터 그룹에 일치하는 Document의 element list를 나타냄. 즉 NodeList를 반환.

 - 지정된 셀렉터가 없는 경우 비어있는 NodeList로 반환됨.

 

 

1. 단일 선택자 실행예제

1) click effect를 줄 요소에 id가 들어감 (clickEffect)

 

2) 따라서 한 개의 id 값에 이벤트를 줄 것이라면 querySelector를 사용하여 실행하면 된다.

 

 

2. 선택자 여러 요소를 줄 때의 실행예제

1) html에 선택자 여러개 주기 

 a. 만약 여러 요소에 click effect를 한꺼번에 주고 싶다면 querySelectorAll을 사용한다.

 b. 아이디를 html에 id="clickEffect"를 추가해 querySelector를 실행하면 querySelector는 해당 값이 중복될 경우 맨 처음에  나온 요소만 받아서 실행 후 끝난다. (id값을 중복으로 사용하는 것은 비추)

 c. 따라서 우선적으로 id 값을 다르게 하여 각각의 요소에 추가해준다.

 

2) 그 후 querySelectorAll로 바꾸어 본다.

 

 

3. querySelectorAll for문 사용 예제

 

4. querySelectorAll forEach문 사용 예제

 

5. querySelectorAll forEach문 (name값을 공통으로 주고) 

각 요소의 component마다 name값을 동일하게 준다.

 

name값으로 querySelectorAll을 걸어서 forEach문을 활용.

 

reference

https://velog.io/@edie_ko/200927JS-querySelector%EC%99%80-querySelectorAll%EC%9D%98-%EC%B0%A8%EC%9D%B4

200927__JS querySelector와 querySelectorAll의 차이