Element.classList.replace() 사용법

classList.replace()은
DOM 요소에 있는 기존의 특정 클래스 값을 새로운 클래스 값으로 교체합니다.
만약, 기존의 특정 클래스 값이 존재하지 않으면 아무런 변경이 일어나지 않고 false를 반환합니다.

일러두기
클래스 속성에는 띄어쓰기로 여러 개의 클래스 값을 가질 수 있습니다.
엄밀히 말하자면, 클래스 속성에는 띄어쓰기로 여러 개의 클래스 이름을 가질 수 있는 클래스 이름 목록을 값으로 가집니다. 따라서, '클래스 값을 교체'한다라는 의미는 클래스 속성에 있는 클래스 이름 목록에서 특정 클래스 이름을 새로운 클래스 이름으로 교체한다라는 것을 의미합니다. 하지만, 관행상 여기에서는 '클래스 값을 교체한다'라고 표기하겠습니다.

HTML class 속성

구문

JavaScript 
element.classList.replace(oldClass, newClass)

replace() 함수는 classList 객체의 메서드입니다.

매개변수

classList.replace()의 매개변수
oldClass 교체 대상이 되는 클래스 값(문자열 형식)입니다.
newClass 교체할 새로운 클래스 값(문자열 형식)입니다.

반환 값

  • 성공적으로 교체할 경우에는 true를 반환하고,
  • 교체 대상이 되는 클래스 값이 존재하지 않아 교체에 실패했을 경우에는 false를 반환합니다.

간단한 활용 예제

다음은 버튼을 클릭하면, <p> 요소의 bg-red 클래스 값을 bg-blue로 교체하는 예제입니다.

HTML 
<style>
    .bold {
        font-weight: 600;
        color: white;
    }
    .bg-red {
        background-color: red;
    }
    .bg-blue {
        background-color: blue;
    }
</style>
<p class="bold bg-red">버튼을 클릭하면 배경색이 변경됩니다.</p>
<hr>
<button type="button">클래스 값 교체하기</button>
JavaScript 
const elem = document.querySelector("p");
const button = document.querySelector("button");

button.addEventListener("click", () => { // 버튼 클릭 이벤트
    // "bg-red" 클래스 값이 있으면 "bg-blue"로 교체
    elem.classList.replace("bg-red", "bg-blue");
});

코드 부연설명
querySelector() 함수는 지정한 CSS 선택자와 일치하는 첫 번째 요소 객체를 반환합니다.

실제 적용된 모습 '버튼'을 실제로 클릭해 보세요!

브라우저 호환성

classList.replace()의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
classList.replace() 67 18 61 12

명세서

classList.replace()의 명세서 사양
명세서 사양
classList.replace() DOM Standard
#ref-for-dom-domtokenlist-replace①

참고문헌

같이 보기