tab기능 만들며 배우는 for 반복문 질문

[김지원]

자바스크립트로 구현하는데 cannot read properties of undefined(remove) 라고 뜨는 에러가 자꾸 나길래

const allButton = document.querySelectorAll('.tab-button')
const allDiv = document.querySelectorAll('.tab-content')

for (let i = 0; i < 3; i++) {
    allButton[i].addEventListener('click', function(){

        for (aa = 0; aa < 3; aa++) {
            allButton[aa].classList.remove('orange')
            allDiv[aa].classList.remove('show')
        }

        allDiv[i].classList.add('show')
        this.classList.add('orange')
    })

}    

걍 for문 한번 더돌려서 구현은 어찌저찌 했습니다.



for (let i = 0; i < 3; i++) {
    allButton[i].addEventListener('click', function(){
        allDiv[i].classList.add('show')
        this.classList.add('orange')
        allDiv.classList.remove('show')
        allButton.classList.remove('orange')
    })
}   

원래 코드는 이랬는데
왜 remove(show) 또는 remove(orange)를 찾을 수 없다는 에러가 뜨는건지,
for문 한번만으로 구현하기는 어려운지,
자바스크립트는 제이쿼리처럼 not 선택자가 없는건지 궁금합니다. 
구글링해도 잘 안나와서 질문 남깁니다 !

[codingapple]

querySelectorAll로 찾은건 뒤에 [] 붙여서 써야합니다 
for 한번 써도 되는데 코드가 길어질 뿐입니다 
:not 셀렉터같은거 쓸 수 있을걸요 

[김지원]

아하 답변 감사합니다 !!
:not 셀렉터 한번 사용해볼게용

[글쓴이]

글