동일한 이름을 가진 class 전부 선택

for (let i = 0; i < $('.tab-button').length; 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'); 
   }) 
});

이 코드를 제이쿼리를 안쓰고 자바스크립트만으로 작성하고 싶은데
동일한 이름을 가진 class tab-button 을 한꺼번에 모두 선택할 수 있는 방법이 뭔가요?
( $('.tab-button').removeClass('orange');  이부분 )
찾아보니  getElementsByClassName, querySelectorAll 로 먼저 변수를 주고 [i] 인덱스를 줘서 for 문을 돌리면 된다는데
그럼 전체선택을 한게 아니고 특정 i 번 class를 선택한 거잖아요
제가 못찾는건지 아무리 찾아봐도 방법을 모르겠습니다.....ㅜㅜ