element.classList.add(className1)

// 여러 개의 클래스 값을 한 번에 추가할 수도 있습니다.
element.classList.add(className1, className2)
element.classList.add(className1, className2, /*...,*/ classNameN)
<style>
    .bold {
        font-weight: 600;
    }
    .bg-red {
        background-color: red;
    }
</style>
<p class="bold">버튼을 클릭하면 "bg-red" 클래스 값이 추가됩니다.</p>
<button type="button">요소에 클래스 값 추가하기</button>
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값 추가하기
    elem.classList.add("bg-red");
});
실제 적용된 모습 "요소에 클래스 값 추가하기" 버튼을 클릭해 보세요!
<style>
    .bold {
        font-weight: 600;
    }
    .bg-red {
        background-color: red;
    }
    .color-white {
        color: white;
    }
</style>
<p class="bold">버튼을 클릭하면 여러 개의 클래스 값이 추가됩니다.</p>
<button type="button">요소에 클래스 값 추가하기</button>
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // 띄어쓰기로 여러 개의 클래스 값 추가하기
    elem.classList.add("bg-red", "color-white");
});
실제 적용된 모습 "요소에 클래스 값 추가하기" 버튼을 클릭해 보세요!
const classes = ["a", "b", "c"];
element.classList.add(...classes);