개인 자료 정리 홈페이지 입니다.

Note > 자바스크립트 관련클래스 이름 얻기 classListBy a3040, Published on Invalid Date

HTML요소에서 클래스 목록을 얻습니다. DOMTokenList 객체를 반환합니다.

관련 메소드는

add(className): 클래스 추가

remove(className): 클래스 삭제

toggle(className): 클래스 토글 (존재하지 않으면 추가, 존재하면 삭제)

contains(className): 클래스 포함 여부 확인

item(index): 클래스 목록에서 인덱스로 클래스 얻기

length: 클래스 목록의 길이

가 있습니다.


classList



const element = document.getElementById("myElement");
// 클래스 추가
element.classList.add("newClass");
// 클래스 삭제
element.classList.remove("oldClass");
// 클래스 토글
element.classList.toggle("active");
// 클래스 포함 여부 확인
const hasClass = element.classList.contains("active");
console.log(hasClass);
// 클래스 목록의 길이
const classCount = element.classList.length;
console.log(classCount);