'탭기능 만들기 1'에서 질문입니다.

[Ingyum Kim]

캡쳐:
https://iankim2511.tistory.com/270

해당 강의부분을 바닐라자바스크립트로 바꿔서 연습해보았는데요.

버튼과,내용탭 전체를 가져와서 class를 지우는 부분에서 질문입니다.

querySelector(‘.tab-button’). 을 사용하면 정상작동하는데,
querySelectorAll(‘.tab-button’).을 사용하면 에러가 나요.

제가 알기로는querySelector은 전체클래스의 첫번째것만 가져오고,
querySelector All 은 전체클래스 전부를 가져오는거로 알고있는데…결과는 거꾸로네요. ㅠㅠ

왜그런지 알 수 있을까요???

[Ingyum Kim]

https://iankim2511.tistory.com/270

[codingapple]

querySelectorAll('.tab-button') 이런걸 콘솔창에 출력해보시면 되겠습니다 

querySelectorAll 을 쓰시면 결과를 무조건 [] 대괄호안에 가져옵니다.

그래서 querySelectorAll('.tab-button').innerHTML 이렇게하면 에러가나고 

querySelectorAll('.tab-button')[1].innerHTML 이렇게 써야 합니다 

 

[Ingyum Kim]

답변감사합니다. 
querySelectorAll('.클래스')에서 [1]번째 를 가져오는것에 관한 것은 이해했습니다. 

그런데, 
querySelectorAll('.클래스') 전체를 가져와서 , active클래스와 show클래스를 지우고 싶은데 , 이것은 어떻게 해야 하는것인가요?

document.querySelectorAll('.tab-button').classList.remove('active');

이렇게 사용하면 에러가 나서요..

[codingapple]

document.querySelectorAll('.tab-button')[0].classList.remove('active');
document.querySelectorAll('.tab-button')[1].classList.remove('active');
document.querySelectorAll('.tab-button')[2].classList.remove('active');

한번에 여러개 싸잡아서 바꾸는건 jQuery만 가능한것이고

쌩자바스크립트 사용시엔 이렇게 하나씩 써야합니다 다른 방법은 없읍니다 

 

[Ingyum Kim]

답변 감사합니다 ?

[글쓴이]

글