#JavaScript, Element.classList -Web API

#JavaScript, Element.classList -Web API

#자바스크립트, classList 속성

​

​-----
설명 Description

Element.classList 는 읽기 전용 속성이다. 요소의 클래스 속성의 값을 가져오는 DOM TokenList 를 반환한다.
클래스 리스트를 조작 할 수 있다.

Element.ClassName을 대체하는 편리한 방법이다. Element.ClassName은 공백으로 구분되는 문자열로 클래스 목록에 접근하는 방식으로 공백제거와 정규표현식(Regular expression)을 사용해야 하는 번거로움이 있다.

​

-----
구문 Syntax

var elementClasses = elementNodeReference.classList;

var 변수명 = 요소.classList;

 

반환 Returns

DOMTokenList는 요소의 클래스 속성값(클래스명)을 나타낸다. 만약 클래스 속성값(클래스명)이 없을 경우, 빈 DOMTokenList를 반환한다(DOMTokenList.length = 0).

DOMTokenList는 읽기 전용이지만, .add() 와 .remove() 메소드를 사용해 클래스 속성값(클래스명)을 조작할 수 있다.

​

-----
메서드 Method

.add(String [, string [,...]])
클래스 속성 값을 추가한다. 여러개를 한번에 추가 할 수도 있다.
만약 추가하려는 클래스가 요소의 class 속성에 이미 있다면 무시한다.

​.remove(String [, string [,...]])
클래스 속성 값을 삭제한다. 여러개를 한번에 삭제 할 수도 있다.
만약 추가하려는 클래스가 요소의 class 속성에 없거나 정의되지 않았다면 에러를 발생시키지 않고 무시한다.​

.item(index)
콜렉션의 인덱스를 이용해 클래스

.toggle(String [, true|false])
인수가 하나일 경우: 클래스 속성값을 토글링한다.
인수가 두개일 경우: 두번째 인수 평가 값이 true이면 클래스 속성값을 추가하고, false이면 제거한다.

.contains(String)
지정한 클래스 값이 요소의 class 속성 값에 존재하는지 확인한다.

.replace(기존 클래스명, 새로운 클래스명)
기존 클래스명을 새로운 클래스명으로 변경한다.

​

-----
예제 Example Code

기본 예제

const div = document.createElement('div'); // div 태그 만들고 div 변수에 참조 시키기
div.className = 'foo'; // foo 클래스명 저장

console.log(div.outerHTML); // <div class="foo"></div>

div.classList.remove("foo"); // .remove() 메소드로 .foo 삭제하기
div.classList.add("anotherclass"); // .add() 메소드로 .anotherclass 설정하기

console.log(div.outerHTML); // <div class="anotherclass"></div>

console.log(div.classList.length); // 1 : 클래스리스트 개수 

console.log(div.classList.item(0)); // anotherclass : 첫 번째 인덱스

div.classList.toggle("visible"); // .visible 토글시키기

// 2번째 인수로 boolean을 선택적으로 사용 할 수 있다.
div.classList.toggle("visible", i < 10 ); // i가 10보다 작을 경우, .visible 클래스명 토글시키기

console.log(div.classList.contains("foo")); // .foo 클래스명이 있는지 없는지 확인하기. 

div.classList.add("foo", "bar", "baz"); // 여러개의 클래스명 한번에 추가

div.classList.remove("foo", "bar", "baz"); // 여러개의 클래스명 한번에 삭제

div.classList.replace("anotherclass", "bar"); // .anotherclass를 .bar로 변경하기

 

 

폴백(Fallback) 예제: add
IE9 이전 버전용 크로스브라우징 소스

var div, name, arr; // 변수 선언
div = document.createElement('div'); // div 태그 만들고 div 변수에 참조 시키기
div.className = 'foo'; // foo 클래스명 추가

if (div.classList) { // div 요소에 classList가 있는지 확인
  div.classList.add("mystyle"); // mystyle 클래스명 추가
} else {
  name = "mystyle";
  arr = div.className.split(" "); // 공백으로 분리
  if (arr.indexOf(name) == -1) { // 추가할 클래스명이 있는지 확인, 없을 경우 if문 실행
    div.className += " " + name; 
  }
}

​

폴백(Fallback) 예제: remove
IE9 이전 버전용 크로스브라우징 소스

if (div.classList) { // div 요소에 classList가 있는지 확인
  div.classList.remove("mystyle"); // mystyle 클래스명 삭제
} else { // div 요소에 classList가 없을 경우
  div.className = div.className.replace(/\bmystyle\b/g, ""); // mystyle 클래스명 삭제
}

​

폴백(Fallback) 예제: contains
IE9 이전 버전용 크로스브라우징 소스​

if (div.classList) { // div 요소에 classList가 있는지 확인
  console.log(div.classList.contains("mystyle")); 
} else { // div 요소에 classList가 없을 경우
  console.log(/\bmystyle\b/g.test(div.className)); // mystyle 클래스명이 있을 경우 true, 없을 경우 false
}

 

폴백(Fallback) 예제: toggle
IE9 이전 버전용 크로스브라우징 소스

if (div.classList) { // div 요소에 classList가 있는지 확인
  div.classList.toggle("mystyle"); 
} else { // div 요소에 classList가 없을 경우
  var classes = div.className.split(" "); // 공백을 기준으로 클래스 속성명을 분리
  var i = classes.indexOf("mystyle"); // .mystyle클래스의 인덱스 확인

  if(i >= 0){ // .mystyle 클래스가 있을 경우 
     classes.splice(i, 1); // 배열에서 .mystyle 클래스명 삭제
  }else{ // .mystyle 클래스가 없을 경우 
     classes.push("mystyle"); // 배열에서 .mystyle 클래스명 추가
     div.className = classes.join(" "); // 배열 공백 기준으로 합치기
  }
  console.log(/\bmystyle\b/g.test(div.className)); // mystyle 클래스명이 있을 경우 true, 없을 경우 false
}

 

​​

-----
폴리필 Polyfill

​MDN 사이트에서 폴리필을 제공하고 있지만, 그대로 적용 할 경우 IE에서 제대로 작동하지 않아 수정했다.
.add, .remove(), toggle(), .contain() 메소드 모두 사용 가능하다.(.replace() 메소드 제외)
IE9부터 사용가능한 폴리필 경로: how2frontend.tistory.com/entry/classList?category=924762

classList

 

MDN 폴리필 경로: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#polyfill

Element.classList - Web APIs | MDN

 

-----
브라우저 호환성 Cross Browsing

IE10이상부터 지원되지만, 모든 메소드를 사용할 수 있는 건 아니다.
polyfill을 사용하거나 className을 적용하는게 좋을 것 같다.

​

-----
명세

​dom.spec.whatwg.org/#dom-element-classlist

DOM Standard

​

-----

참고 사이트

​

https://developer.mozilla.org/ko/docs/Web/API/Element/classList

Element.classList - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Element.classList - Web APIs | MDN

www.w3schools.com/jsref/met_element_getattribute.asp

DOM Element getAttribute() Method