queryselector 사용시 Uncaught TypeError

level1 '서브메뉴 만들어보기와 classList다루기' 강좌 실습 코드 중 일부인데요.

<ul class="list-group ">
<li class="list-group-item">An item

<li class="list-group-item">A second item

<li class="list-group-item">A third item

<li class="list-group-item">A fourth item

<li class="list-group-item">And a fifth one

<!-- JavaScript Bundle with Popper -->
<script>
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.querySelector('.list-group')[0].classList.toggle('show')
});
----
getElementsByClassName을 사용할 땐 작동이 되던 토글 버튼이 querySelector로 코드를 수정하여 실습을 해 보니 
index.html:35 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
라는 에러문구와 함께 작동하지 않습니다. 그런데 querySelector를 querySelectorAll로 수정하니 작동이 되더라고요.
여기서 querySelector로는 작동이 안 되는 이유가 무엇일까요? (만약 'list-group'이 적용된 클래스가 복수라서 그런 거라면,첫번째 index 요소엔 토글이
적용돼야 하는 것이 아닌지요..)