MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.classList

번역 작업 진행중입니다.

Element.classList 는 요소의 클래스 속성의 컬렉션인 활성 DOMTokenList 를 반환하는 읽기전용 프로퍼티이다.

classList 사용은 공백으로 구분된 문자열인 element.className  을 사용하여 클래스들의 목록에 접근하는 방식을 대체하는 간편한 방법이다.

문법

const elementClasses = elementNodeReference.classList;

elementClasses elementNodeReference 의 클래스 속성을 나타내는 DOMTokenList이다. 만약 클래스 속성이 설정되어 있지 않거나 비여있다면 elementClasses.length 는 0을 반환한다. element.classList 그 자체는 읽기전용 프로퍼티이지만 add()와 remove() 메서드를 이용하여 변형할 수 있다.

메서드

add( String [, String] )
특정 클래스 값을 추가한다. 만약 요소의 속성에 추가하려는 클래스가 존재한다면 무시된다.
remove( String [, String] )
특정 클래스 값을 제거한다.
item( Number )
클래스 값을 콜렉션의 인덱스를 이용하여 반환한다.
toggle( String [, force] )
한개의 인수만 있을 때 : 클래스 값을 변환한다. 즉 클래스가 존재한다면 지우고 false를 반환하며, 존재하지 않다면 그것을 추가하고 true를 반환한다.
두번째 인수가 있을 때 : 두번째 인수가 true로 평가되면 특정 클래스 값을 추가하고 false로 평가되면 지운다.
contains( String )
특정 클래스 값이 요소의 클래스 속성에 존재하는지 확인한다.

예제

// div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

// add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

// add or remove multiple classes
div.classList.add("foo", "bar");
div.classList.remove("foo", "bar");

파이어폭스 26 이전의 버전에서는 add/remove/toggle 메서드에서 여러 인수를 사용할 수 없다. 아래의 문서를 참조하시오.
https://bugzilla.mozilla.org/show_bug.cgi?id=814014

폴리필

// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function() {
    // helpers
    var regExp = function(name) {
        return new RegExp('(^| )'+ name +'( |$)');
    };
    var forEach = function(list, fn, scope) {
        for (var i = 0; i < list.length; i++) {
            fn.call(scope, list[i]);
        }
    };

    // class list object with basic methods
    function ClassList(element) {
        this.element = element;
    }

    ClassList.prototype = {
        add: function() {
            forEach(arguments, function(name) {
                if (!this.contains(name)) {
                    this.element.className += this.element.className.length > 0 ? ' ' + name : name;
                }
            }, this);
        },
        remove: function() {
            forEach(arguments, function(name) {
                this.element.className =
                    this.element.className.replace(regExp(name), '');
            }, this);
        },
        toggle: function(name) {
            return this.contains(name) 
                ? (this.remove(name), false) : (this.add(name), true);
        },
        contains: function(name) {
            return regExp(name).test(this.element.className);
        },
        // bonus..
        replace: function(oldName, newName) {
            this.remove(oldName), this.add(newName);
        }
    };

    // IE8/9, Safari
    if (!('classList' in Element.prototype)) {
        Object.defineProperty(Element.prototype, 'classList', {
            get: function() {
                return new ClassList(this);
            }
        });
    }

    // replace() support for others
    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
        DOMTokenList.prototype.replace = ClassList.prototype.replace;
    }
})();

명세

명세서 상태 주석
WHATWG HTML Living Standard
The definition of 'Element.classList' in that specification.
Living Standard Note within the HTML specification related to the class attribute.
DOM
The definition of 'Element.classList' in that specification.
Living Standard Initial definition
DOM4
The definition of 'Element.classList' in that specification.
Recommendation  

브라우저 호환성

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8 12 3.6 (1.9.2) 10[1] 11.50 5.1
toggle() method's second argument 24 12 24 (24) No support[2] 15 7
Multiple arguments for add() & remove() 28 12 26 (26) No support 15 7
replace() No support ? 49 (49) No support No support No support
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0 12 1.0 (1.9.2) 10[1] 11.10 5.0
toggle method's second argument 4.4 12 24.0 (24) No support[2] ? 7.0
multiple arguments for add() & remove() 4.4 12 ? No support ? 7.0
replace() No support No support 49 (49) No support No support No support

[1] SVG 요소 미지원.  참조 : Microsoft.
[2] 인터넷 익스플로러에서는 사용할 수 없다. 참조 : Microsoft

참고

문서 태그 및 공헌자

 이 페이지의 공헌자: kooljay82
 최종 변경: kooljay82,