Help us test MDN's new front-end: https://discourse.mozilla.org/t/help-us-test-mdns-new-react-front-end-beta/42593

이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

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

classList 사용은 공백으로 구분된 문자열인 {domxref("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 )
특정 클래스 값이 요소의 클래스 속성에 존재하는지 확인한다.
replace( oldClass, newClass )
기존의 클래스를 새로운 클래스로 교체합니다.

예제

// 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;
    }
})();

명세

명세서 상태 주석
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.
Obsolete  

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
classListChrome Full support 8Edge Full support 16
Full support 16
Partial support 12
Notes
Notes Not supported for SVG elements.
Firefox Full support 3.6IE Full support 10Opera Full support YesSafari Full support 6WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5Samsung Internet Android Full support Yes
toggle() method's second argumentChrome Full support 24Edge Full support 12Firefox Full support 24IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 24Opera Android ? Safari iOS Full support 7Samsung Internet Android ?
Multiple arguments for add() & remove()Chrome Full support 24Edge Full support 12Firefox Full support 26IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 26Opera Android ? Safari iOS Full support 7Samsung Internet Android ?
replace()Chrome Full support 61Edge Full support 17Firefox Full support 49IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android Full support 61Edge Mobile ? Firefox Android Full support 49Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.

참고

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, CERT, kooljay82
최종 변경자: alattalatta,