자바스크립트 classList를 써야하는 이유

Web

자바스크립트 classList를 써야하는 이유

노루룽 2021. 1. 16. 21:19

~잠깐 사담~

아직 공부한 지 얼마 안 됐지만, 자바스크립트는 너무 어렵다.ㅠㅠ

파이썬, 자바를 처음 배울때 보다 훨씬 어려움....ㅠㅠㅠㅠ

게다가 지금 챌린지 중인데, 잘하시는 분들 너무 많아서 자괴감 든다. 진짜 리스펙......😭

if문을 사용할 경우

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review</title>
    <link rel="stylesheet" href="index.css" />
</head>
<body>
    <h1 id = "title">JS is so hard!!</h1>
    <script src="index.js"></script>
</body>
</html>

css

body {
  background-color: #fab1a0;
}

h1 {
  color: #2980b9;
  transition: color 0.5s ease-in-out;
}

.clicked {
  color: #6c5ce7;
}

JS

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    const currentClass = title.className;
    console.log(currentClass);

    if(currentClass !== CLICKED_CLASS){
        title.className = CLICKED_CLASS;
    }
    else{
        title.className = "";
    }
}

function init(){
    title.addEventListener("click", handleClick);
}

init();

css에는 꾸미는 기능만, js에서 동적으로 처리하는 기능만 넣은 상태이다.

클릭 시, h1의 class가 아무것도 없는 상태에서 class="click"으로 바뀐다.

문제점

하지만, 이것은 현재 h1의 class가 없는 상태이기 때문에 정상 작동하는 것이다.

html의 h1에 class="btn"을 추가하고,

css에서 .btn{cursor: pointer}를 추가하자. (커서가 손가락 모양으로 나타나게 하는 것.)

2번 클릭하면 class가

"btn" -> "click" -> ""

의 상태로 바뀐다.

즉, 기존의 클래스가 사라지게 되는 문제 발생!💦

이처럼 replace 문제를 해결하기 위해 classList를 사용해야 한다.

classList - Methods

add(String)
- 지정한 클래스 값을 추가한다.
- 만약 추가하려는 클래스가 이미 존재한다면 무시.

remove(String)
- 지정한 클래스 값을 제거한다.
- 존재하지 않는 클래스라면? 에러 발생 X

contains(String)
- 지정한 클래스 값이 존재하는지 확인.
- true, false 값을 반환.

replace(old, new)
- old class를 new class로 대체

item(Number)
- 인덱스 값을 활용하여 클래스 값을 반환

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    const hasClass = title.classList.contains(CLICKED_CLASS);

    if(!hasClass){
        title.classList.add(CLICKED_CLASS);
    }
    else{
        title.classList.remove(CLICKED_CLASS);
    }
}

function init(){
    title.addEventListener("click", handleClick);
}

init();

classList를 사용해서 코드 재작성.

정상적으로 작동된다! 👍

하지만, 이것도 더욱 편리하게 만들 수 있다.

바로바로 toggle 메소드를 이용하는 것!!!!!!

classList - toggle

toggle은 클래스의 유무를 체크해서 없으면 add, 있으면 remove를 자동으로 시켜준다.

아래의 코드는 바로 위의 코드와 같은 기능을 한다.

const title = document.querySelector("#title");

const CLICKED_CLASS = "clicked";

function handleClick(){
    title.classList.toggle(CLICKED_CLASS);
}

function init(){
    title.addEventListener("click", handleClick);
}

init();

넘나 편리한 것!!😎

'Web' 카테고리의 다른 글

노마드코더 바닐라JS 챌린지 8기 졸업 후기 (0)	2021.03.25
자바스크립트 함수, 백틱, DOM, querySelector (0)	2021.01.15
자바스크립트 변수, 배열(Array), 객체(Object) (0)	2021.01.14
자바스크립트, ES, 바닐라JS, SPA (0)	2021.01.13
CSS 링크 밑줄 없애기, 링크 색상 없애기 (2)	2020.08.29

현재글자바스크립트 classList를 써야하는 이유

행뽁🐥