JS-DOM 클래스명 제어

클래스명 제어하기

ex)

<ul class="list">
  <li class="on"></a href="#">MENU1</a></li>
  <li></a href="#">MENU2</a></li>
  <li></a href="#">MENU3</a></li>
  <li></a href="#">MENU4</a></li>
  <li></a href="#">MENU5</a></li>
</ul>

클릭한 menu버튼만 on이 활성화 되게 클래스명 제어

const btns = document.querySelectorAll(".list li");

btns.forEach((btn, index) => {
	btn.addEventListener("click", e => {
    	btns[index].classList.add('on');
      //btns의 index(순번)에 classList(클래스)을 add(추가) 'on'('on'이라는)
    })
})

중첩반복문

const btns = document.querySelectorAll(".list li");

btns.forEach((btn, index) => {
	btn.addEventListener("click", e => {
      	for(let item of btns){
        	item.classList.remove('on');
        }
      //버튼을 클릭하는 순간, 다시 반복을 돌면서 모든 버튼에 'on'이라는 클래스를 지워버림
    	btns[index].classList.add('on');
    })
})

조건문을 이용한 응용

const btns = document.querySelectorAll(".list li");

btns.forEach((btn, index) => {
	btn.addEventListener("click", e => {
      	let isOn = e.currentTarget.classList.contains('on')
        //클릭한 대상 요소에, 'on'이 붙어있으면(contains) true, 없으면 false 즉, isOn이 true라면, 활성화 되어있는 버튼을 또 클릭했다는 뜻
        if(isOn){
        	return;
          //리턴은 1)함수 안쪽에 있는걸 바깥으로 내보내주는 역할 2)코드가 실행이 되다가 return문 만나면 코드 강제종료 되는 역할 두가지 가 있음.
        }
      	for(let item of btns){
        	item.classList.remove('on');
        }
      //버튼을 클릭하는 순간, 다시 반복을 돌면서 모든 버튼에 'on'이라는 클래스를 지워버림
    	btns[index].classList.add('on');
    })
})