Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

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 AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support YesFirefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
replaceChrome Full support 61Edge Full support 17Firefox Full support 49IE ? Opera Full support 48Safari Full support YesWebView Android Full support 61Chrome Android Full support 61Edge Mobile Full support 17Firefox Android Full support 49Opera Android Full support 48Safari iOS Full support YesSamsung Internet Android No support No
supports
Experimental
Chrome Full support 50Edge Full support 17Firefox Full support 49IE No support NoOpera Full support YesSafari ? WebView Android Full support 50Chrome Android Full support 50Edge Mobile Full support 17Firefox Android Full support 49Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 5.0
Trimming of whitespace and removal of duplicatesChrome Full support YesEdge ? 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 YesWebView Android ? Chrome Android Full support YesEdge Mobile ? Firefox Android Full support 55Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
lengthChrome Full support YesEdge Full support 12Firefox Full support 50IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 50Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
valueChrome Full support YesEdge ? Firefox Full support YesIE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
itemChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
containsChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
addChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
removeChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
toggleChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support 11Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
entriesChrome Full support YesEdge ? Firefox Full support 50IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 50Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
forEachChrome Full support YesEdge No support NoFirefox Full support 50IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 50Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
keysChrome Full support YesEdge ? Firefox Full support 50IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 50Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
valuesChrome Full support YesEdge ? Firefox Full support 50IE ? Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 50Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

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

See Also

Метки документа и участники

Обновлялась последний раз: xfq,