탭기능 만들며 배우는 for문(2) 강좌에서 질문드립니다.

[전규빈]

for (var i = 0; i < 3; i++){

  $('.tab-button').eq(i).on('click', function(){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(i).addClass('orange');
    $('.tab-content').removeClass('show');
    $('.tab-content').eq(i).addClass('show');
  })

이것을 제이쿼리를 사용안하고 일반적으로 표현하려면
for (let i = 0; i < 3; i++) {
  document.querySelectorAll('.tab-button')[i].addEventListener('click', function(){
    document.querySelectorAll('.tab-button')[i].classList.remove('orange');
    document.querySelectorAll('.tab-button')[i+1].classList.remove('orange');
    document.querySelectorAll('.tab-button')[i+2].classList.remove('orange');
    document.querySelectorAll('.tab-button')[i].classList.add('orange');
    document.querySelectorAll('.tab-content')[i].classList.remove('show');
    document.querySelectorAll('.tab-content')[i+1].classList.remove('show');
    document.querySelectorAll('.tab-content')[i+2].classList.remove('show');
    document.querySelectorAll('.tab-content')[i].classList.add('show');

이렇게 코드를 작성하면 작동이 안되는데 querySelectorAll 뒤에 인덱스를 꼭 붙여야만 하는건가요?
구글에 검색해보니 인덱스를 안 붙이고 사용하는 거 같은데 인덱스를 안 붙이면 작동을 안합니다.
물론 제가 올린 코드도 작동을 안하구요

[codingapple]

저러면 2번 버튼을 클릭하면
querySelectorAll('.tab-button')[2] 
querySelectorAll('.tab-button')[3]
querySelectorAll('.tab-button')[4]
버튼에 클래스를 제거해주겠군요 [4]번째 버튼은 없어서 에러날듯요 

querySelectorAll은 항상 뒤에 [] 붙여야합니다

[전규빈]

네 그거까지는 이해했는데 그렇다면 제이쿼리를 안 쓰고 어떻게 작성할 수 있을까요?

[codingapple]

    document.querySelectorAll('.tab-button')[0].classList.remove('orange');
    document.querySelectorAll('.tab-button')[1].classList.remove('orange');
    document.querySelectorAll('.tab-button')[2].classList.remove('orange');
합시다

[글쓴이]

글