[JavaScript] forEach구문 및 Selected 활용하기 (8)

해당 게시물에서는 여러가지 요소에 대해서 이벤트 리스너를 처리하는 방식과 그리고 css통해서 여러가지 요소중에 한 요소에 대해서 "선택" 됨을 알려주도록 하는 기능에 대해서 알아보겠다.

 

html

다음과 같은 구조의 HTML 구문이 있다. 각각의 코인명 가격 그리고 변동률에 대해서 <tr> 태그로 묶여있는 구조이다.

내가 다음과 같은 여러 요소중에서 코인 한개를 "클릭"해서 "선택"을 하려고 할 때, 어떤 작업을 통해서 다음과 같은 작업을 처리 할 수 있는지 자바스크립트 코드를 살펴보자

 

JavaScript

 

일단 <tr>태그를 확인해보면 동일하게 class = "coin"으로 묶어두었다. 묶어둔 클래스를 통해서 선택자를 .coin으로 해당 요소들을 참조가 가능하다. JavaScript 코드에서

 

다음과 같이 document.querySelectorAll(선택자) 키워드를 사용하게 되면 해당 선택자에 부합하면 모든 태그가 listItems에 

"노드리스트" 형태로 반환된다. 모든 노드(요소) 리스트에 대해서 다루려 할 때, for문이 아닌 forEach문이 사용된다.

 

노드리스트에 대해서 forEach문을 사용하는데 각 요소를 element를 통해서 다룰 수 있다. element (노드)에 대해서 addEventListener('click', () => {실행문});  을 통해 클릭 이벤트가 발생하면 실행문을 실행하게 된다.

 

조건문을 통해서 해당 요소에 classList.contains('selected') 클릭된 요소가 selected 클래스를 포함하고 있는지 확인한다.

 

만약 selected 클래스를 포함하고 있다면 ( 클릭이 되어있다면 ) ,  해당 클래스를 remove를 통해서 삭제한다.

그리고 블록 밖에 위치한 selectedItem = 선택된 요소; 를 null로 처리한다.

 

 

다음 else 구문해서는 클릭이 되지 않아있는 요소를 클릭했다면, 

일단 listItems.forEach() 구문을 통해서 .coin 요소들 전부를 훑으며 classList.remove 메서드를 통해서 selected 클래스를 지운다

 

그리고 클릭된 요소에 대해서는 selected 클래스를 추가해주어야 하므로 classList.add() 를 통해서 추가한다.

클릭된 요소가 다른 작업을 할 때 사용되므로 selectedItem = element를 통해서 요소를 넘겨준다.

 

선택되어있는 selected 클래스는 단순히 css에서 테두리나 배경색을 설정해서 사용자가 선택됐음을 보여주도록 설정하면된다.