DOMTokenList

번역이 완료되지 않았습니다. Please help translate this article from English

The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLAreaElement.relList, HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive.

Properties

DOMTokenList.length Read only
Is an integer representing the number of objects stored in the object.
DOMTokenList.value
The value of the list as a DOMString.

Methods

DOMTokenList.item()
Returns an item in the list by its index (returns undefined if the number is greater than or equal to the length of the list).
DOMTokenList.contains()
Returns true if the list contains the given token, otherwise false.
DOMTokenList.add()
Adds the given token to the list.
DOMTokenList.remove()
Removes the specified token from the list.
DOMTokenList.replace()
Replaces an existing token with a new token.
DOMTokenList.supports()
Returns true if a given token is in the associated attribute's supported tokens.
DOMTokenList.toggle()
Removes a given token from the list and returns false. If token doesn't exist it's added and the function returns true.
DOMTokenList.entries()
Returns an iterator allowing you to go through all key/value pairs contained in this object.
DOMTokenList.forEach()
Executes a provided function once per DOMTokenList element.
DOMTokenList.keys()
Returns an iterator allowing you to go through all keys of the key/value pairs contained in this object.
DOMTokenList.values()
Returns an iterator allowing you to go through all values of the key/value pairs contained in this object.

Examples

In the following simple example we retrieve the list of classes set on a <p> element as a DOMTokenList using Element.classList, add a class using DOMTokenList.add(), and then update the Node.textContent of the <p> to equal the DOMTokenList.

First, the HTML:

<p class="a b c"></p>

Now the JavaScript:

var para = document.querySelector("p");
var classes = para.classList;
para.classList.add("d");
para.textContent = 'paragraph classList is "' + classes + '"';

The output looks like this:

Trimming of whitespace and removal of duplicates

Methods that modify the DOMTokenList (such as DOMTokenList.add()) automatically trim any excess Whitespace and remove duplicate values from the list. For example:

<span class="    d   d e f"></span>
var span = document.querySelector("span");
var classes = span.classList;
span.classList.add("x");
span.textContent = 'span classList is "' + classes + '"';

The output looks like this:

Specifications

Specification Status Comment
DOM
The definition of 'DOMTokenList' in that specification.
Living Standard Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
DOMTokenListChrome Full support 8Edge Full support 12Firefox Full support 3IE Full support 10Opera Full support 11.5Safari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11.5Safari iOS Full support 5.1Samsung Internet Android Full support 1.0
addChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
containsChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
entriesChrome Full support 42Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
forEachChrome Full support 42Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
itemChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
keysChrome Full support 42Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
lengthChrome Full support 8Edge Full support 12Firefox Full support 50IE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support 50Opera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
removeChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
Removes duplicatesChrome Full support 60Edge Full support 17Firefox Full support 55IE No support NoOpera Full support 47Safari Full support 10WebView Android Full support 60Chrome Android Full support 60Firefox Android Full support 55Opera Android Full support 44Safari iOS Full support 10Samsung Internet Android Full support 8.0
replaceChrome Full support 61Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 48Safari Full support 10.1WebView Android Full support 61Chrome Android Full support 61Firefox Android Full support 49Opera Android Full support 45Safari iOS Full support 10.3Samsung Internet Android Full support 8.0
supports
Experimental
Chrome Full support 49Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 36Safari Full support 10.1WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 49Opera Android Full support 36Safari iOS Full support 10.3Samsung Internet Android Full support 5.0
toggleChrome Full support 8Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support 3Chrome Android Full support 18Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support 1.0
Trims whitespaceChrome Full support 48Edge Full support 12Firefox Full support 51IE Full support 10Opera Full support 35Safari Full support 10WebView Android Full support 48Chrome Android Full support 48Firefox Android Full support 51Opera Android Full support 35Safari iOS Full support 10Samsung Internet Android Full support 5.0
valueChrome Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge Full support 17Firefox Full support 47IE No support NoOpera Full support 37
Notes
Full support 37
Notes
Notes Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari Full support 10WebView Android Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Chrome Android Full support 50
Notes
Full support 50
Notes
Notes Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Firefox Android Full support 47Opera Android Full support 37
Notes
Full support 37
Notes
Notes Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari iOS Full support 10Samsung Internet Android Full support 5.0
Notes
Full support 5.0
Notes
Notes Before Samsung Internet 5.0, this property was part of the deprecated child DOMSettableTokenList interface.
valuesChrome Full support 42Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10.1WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10.3Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

See also