js - className , classList

className

• 특정 엘리먼트 클래스 속성의 값을 가져오거나 설정 할 수 있음

사용방법

let elm = document.getElementById('item');
if(elm.className === 'active'){
elm.className = 'inactive';
}else{
elm.className = 'active';
}

->

• let elm = document.getElementById('item');
  (elm에 id가 'item'인 요소를 elm에 저장)
• if(elm.className === 'active')
  -> eml의 class가 'active' 라면
• eml.className = 'inactive';
  -> class 이름을 inactive로 변경
• else{ elm.className = 'active'; }
  -> eml에 class 이름에 'active'가 없으면 넣어줌

classList

• 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티
• 공백으로 구분된 문자열인 element.className 을 통해 엘리먼트 클래스 목록에 접근하는 방식을 대체하는 간편한 방법.
  -elementClasses는 elementNodeReference의 클래스 속성을 나타내는 DOMTokenList.
  -classList는 읽기전용 프로퍼티지만 add()와 remove()로 변형 가능

메서드 종류

1. add(String[, String[, ...]])

• 지정된 클래스 값을 추가. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재하면 무시

2. remove(String[, String[, ...]])

• 지정한 클래스값 제거.

4. item( Number )

• 콜렉션의 인텍스를 사용해 클래스 값을 반환

5. toggle(String[,force])

• 하나의 인수만 있을 때 : 클래스 값을 토글링
  즉 클래스가 존재하면 제거하고 false 반환
  존재하지 않으면 클래스를 추가하고 true를 반환
• 두번째 인수가 있을 때 : 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거.

6. contains(String)

• 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인

7. replace( oldClass, newClass)

• 존재하는 클래스를 새로운 클래스로 교체

사용 방법

1) className =

->className 프로퍼티에 'too' 클래스 이름 추가

2) classList.add()

-> classList.add()로 class 추가 가능

3) classList.remove()

4) spread구문을 이용한 add,remove

[spread 문법 다시보기]

5) classList.replace()