for문 querySelectorAll('.tab-button')[0]에 변수넣기

[noneblock]

 for (let i = 0; i < $('.tab-button').length; i++){

let length = $('.tab-button').length;

document.querySelectorAll('.tab-button')[i].addEventListener('click',function(){
document.querySelectorAll('.tab-button')[length].classList.remove('orange');
document.querySelectorAll('.tab-button')[i].classList.add('orange');
document.querySelectorAll('.tab-content')[length].classList.remove('show');
document.querySelectorAll('.tab-content')[i].classList.add('show');
});

}

선생님 제이쿼리 사용하지 않고 자바로 구현해보고싶어서 코드를 짯는데 제이쿼리 시엔[ ]안에 변수i를 넣으면 버튼이 몇개가 되든
확장성 있게 구현이 가능한데 

자바스크립트에서는querySelectorAll('.tab-button')[0] <<안에 변수를 사용할 수 없나요?? 하나하나 번호를 입력하는 수 밖에 없을까요.. 위에처럼 변수넣어서 하니 아예 작동이 안되네요ㅜㅜ

[codingapple]

저러먼 [3] 만 기입되어서 실행되겠군요 
하나하나 번호 입력하면 됩니다

[noneblock]

제이쿼리로 사용했을때는 html개수만큼 변수 넣어 사용가능했는데
자바스크립트로는 변수사용이 안되는건가요..?

[codingapple]

$() 로 여러 html 찾으면 한 번에 수정가능한데
쌩자바스크립트는 그런거 안되어서 하나씩 수정하면 됩니다

[noneblock]

아넵1! 감사합니다!

[글쓴이]

글