Vanilla JS 반복문, 동적 요소 제어

리스트 항목 클릭 시 해당 항목 강조 하기

 

jQuery

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<style>
	.selected{background:yellow;}
</style>
<ul class="list">
  <li>항목1</li>
  <li>항목2</li>
  <li>항목3</li>
</ul>

<script>
 $(".list li").click(function() {
  $(".list li").removeClass('selected');
  $(this).addClass('selected')
 });
</script>

 

---

 

Vanilla JS

<style>
	.selected{background:yellow;}
</style>
<ul class="list">
  <li>항목1</li>
  <li>항목2</li>
  <li>항목3</li>
</ul>

<script>
  const items = document.querySelectorAll(".list li");
  items.forEach(function(item){
    item.addEventListener("click", function(){
      items.forEach(el => el.classList.remove("selected"));
      this.classList.add("selected");
    });
  });
</script>

 

1. document.querySeletorAll("#list li")

#list안에 있는 모든 li 태그를 선택해서 NodeList로 반환

 

2. forEach(functio(item){...})

모든 li요소마다 반복하면서 이벤트를 붙임

 

3. item.addEventListener("click", function(){...})

각 아이템을 클릭할 때마다 실행되는 클릭 이벤트 핸들러

 

4. items.forEach(el => el.classList.remove("selected"))

• 리스트 전체에서 selected클래스를 전부 제거(선택 해제).
• el은 각각의 <li>를 의미

items.forEach(function(el) {
	el.classList.remove("selected");
});

 

• classList : DOM요소의 class 속성을 조작할 수 있는 특수한 객체
  • .add(), .remove(), .toggle(), .contains() 같은 메서드를 가짐

el.classList.add("active");     // 클래스 추가
el.classList.remove("active");  // 클래스 제거
el.classList.toggle("active");  // 있으면 제거, 없으면 추가
el.classList.contains("active");// 포함 여부 확인 (true/false)

 

 

 

5. this.classList.add("selected")

클릭한 요소에만 selected 클래스를 추가해서 강조 표시

 

• 항목1
• 항목2
• 항목3