querySelector와 querySelectorAll의 차이점

querySelector는 css 요소명을 작성해서 찾을 수 있어서 getElementById등 보다 편리하게 사용 할 수 있다는 장점이 있다.

하지만 같은 이름을 가지고 있는 것 중에서는 가장 첫번째꺼만 찾아준다.

 

같은 이름을 여러개 사용 하고 있다면

그럴 경우에는 querySelectorAll을 사용 해 주면 된다.

만약 이렇게 list-group-item에 두번째를 선택해서 사용하고 싶다면

document.querySelectorAll('.list-group-item')[1]

뒤에 내가 선택하고자 하는 순서에 맞는 인덱스 번호를 넣어주면 된다.

해당 코드를 콘솔창에 찍어보면 내가 찾고자 하는 내용이 출력 되는 것을 확인 할 수 있다.