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 1Edge Full support 12Firefox Full support 3IE Full support 10Opera Full support 11.5Safari Full support 5.1WebView Android Full support 1Chrome 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 1Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
containsChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
entriesChrome Full support 45Edge Full support ≤79Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10Samsung Internet Android Full support 5.0
forEachChrome Full support 45Edge Full support 16Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10Samsung Internet Android Full support 5.0
itemChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
keysChrome Full support 45Edge Full support ≤79Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10Samsung Internet Android Full support 5.0
lengthChrome Full support 1Edge Full support 12Firefox Full support 50IE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 50Opera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
removeChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
Trimming of whitespace and removal of duplicatesChrome Full support YesEdge Full support 12
Notes
Full support 12
Notes
Notes EdgeHTML versions of edge only trim whitespace - it doesn't remove duplicates. This behavior was fixed in Chromium versions of Edge.
Firefox Full support 55IE Full support Yes
Notes
Full support Yes
Notes
Notes IE only trims whitespace - it doesn't remove duplicates.
Opera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesFirefox Android Full support 55Opera Android Full support YesSafari iOS Full support 10Samsung Internet Android Full support Yes
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 10WebView Android Full support 49Chrome Android Full support 49Firefox Android Full support 49Opera Android Full support 36Safari iOS Full support 10Samsung Internet Android Full support 5.0
toggleChrome Full support 1Edge Full support 12Firefox Full support YesIE Full support 11Opera Full support YesSafari Full support 5.1WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support 5.1Samsung Internet Android Full support Yes
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 ≤18Firefox Full support YesIE 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 YesOpera 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 45Edge Full support ≤79Firefox Full support 50IE No support NoOpera Full support 32Safari Full support 10WebView Android Full support 45Chrome Android Full support 45Firefox Android Full support 50Opera Android Full support 32Safari iOS Full support 10Samsung 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