هذه الترجمة لم تكتمل. رجاءً ساعد بترجمة هذه المقالة من الإنجليزية.

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes10 Yes Yes
replace611749 ?48 Yes
supports501749 No Yes ?
Trimming of whitespace and removal of duplicates Yes ?55 Yes1 Yes Yes
length Yes1250 ? Yes ?
value Yes ? Yes ? Yes Yes
item Yes12 Yes10 Yes Yes
contains Yes12 Yes10 Yes Yes
add Yes12 Yes10 Yes Yes
remove Yes12 Yes10 Yes Yes
toggle Yes12 Yes11 Yes Yes
entries Yes ?50 ? Yes ?
forEach Yes No50 ? Yes ?
keys Yes ?50 ? Yes ?
values Yes ?50 ? Yes ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes
replace6161174948 Yes No
supports50501749 Yes No5.0
Trimming of whitespace and removal of duplicates ? Yes ?55 Yes Yes Yes
length Yes Yes ?50 Yes ? Yes
value Yes Yes ? Yes Yes Yes Yes
item Yes Yes ? Yes Yes Yes Yes
contains Yes Yes ? Yes Yes Yes Yes
add Yes Yes ? Yes Yes Yes Yes
remove Yes Yes ? Yes Yes Yes Yes
toggle Yes Yes ? Yes Yes Yes Yes
entries Yes Yes ?50 Yes ? Yes
forEach Yes Yes ?50 Yes ? Yes
keys Yes Yes ?50 Yes ? Yes
values Yes Yes ?50 Yes ? Yes

1. IE only trims whitespace — it doesn't remove duplicates.

See Also

Document Tags and Contributors

المساهمون في هذه الصفحة: xfq
آخر مَن حدّثها: xfq,