DOMTokenList : Object

An object containing a list of strings. Used in
%%/Element#classList|**Element.classList**%% and
%%/HTMLIFrameElement#sandbox|**HTMLIFrameElement.sandbox**%%.

Spec:
https://dom.spec.whatwg.org/#domtokenlist

----
instance[index : Number] : String

Retrieves the token at **index**.  You can also use the %%#item|**item()**%% method.

<htmlexample>
<span id='foo' class='bar baz'>foo</span>
<script>
  var foo = document.getElementById('foo');
  for (var i = 0; i < foo.classList.length; i++) {
    console.log(foo.classList[i]);
  }
</script>
</htmlexample>

----
instance.length : Number

The number of tokens in **this**.

<htmlexample>
<span id='foo' class='bar baz'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.classList.length);
</script>
</htmlexample>

ReadOnly:
true

Spec:
https://dom.spec.whatwg.org/#dom-domtokenlist-length

----
instance.value : String

A string value of the token list.
See also %%/Element#className|className%%.

<htmlexample>
<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo'>foo</span>
<script>
  var foo = document.getElementById('foo');
  foo.classList.value = 'bar baz';
</script>
</htmlexample>

Spec:
https://dom.spec.whatwg.org/#dom-domtokenlist-value

----
prototype.item(index : Number) : String

Same as %%#indexer_Number|**this[index]**%%.

Spec:
https://dom.spec.whatwg.org/#dom-domtokenlist-item

----
prototype.add(token : String) : undefined

Adds **token** to **this**.

<htmlexample>
<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo' class='bar'>foo</span>
<button onclick='addClass()'>Add Class</button>
<script>
  var addClass = function() {
    var foo = document.getElementById('foo');
    foo.classList.add('baz');
  };
</script>
</htmlexample>

Spec:
https://dom.spec.whatwg.org/#dom-domtokenlist-add

----
prototype.contains(token : String) : Boolean

Returns **true** if **token** is in **this** and
**false** otherwise.

<htmlexample>
<span id='foo' class='bar'>foo</span>
<script>
  var foo = document.getElementById('foo');
  console.log(foo.classList.contains('bar'));
  console.log(foo.classList.contains('baz'));
</script>
</htmlexample>

Spec:
https://dom.spec.whatwg.org/#dom-domtokenlist-contains

----
prototype.remove(token : String) : undefined

Removes **token** from **this**.

<htmlexample>
<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo' class='bar baz'>foo</span>
<button onclick='removeClass()'>Remove Class</button>
<script>
  var removeClass = function() {
    var foo = document.getElementById('foo');
    foo.classList.remove('baz');
  };
</script>
</htmlexample>

Spec:
https://dom.spec.whatwg.org/#dom-domtokenlist-remove

----
prototype.replace(oldToken : String, newToken : String) : undefined

Removes **oldToken** from **this** and adds **newToken**.

<htmlexample>
<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo' class='baz'>foo</span>
<script>
  var foo = document.getElementById('foo');
  foo.classList.replace('bar', 'baz');
</script>
</htmlexample>

Spec:
https://dom.spec.whatwg.org/#dom-domtokenlist-replace

----
prototype.toggle(token : String, [value : Boolean]) : Boolean

If **value** is not specified, removes **token** from the list
if was in **this** or adds **token** to the list if it was not
in **this**. If **value** is **true**, **token** is added to
**this** if not already there.  If **value** is **false**,
**token** is removed from **this**.

<htmlexample>
<style>
  .bar { font-weight: bold;  }
  .baz { color: red; }
</style>
<span id='foo' class='bar baz'>foo</span>
<button onclick='toggleClass()'>Toggle Class</button>
<script>
  var toggleClass = function() {
    var foo = document.getElementById('foo');
    foo.classList.toggle('baz');
  };
</script>
</htmlexample>

Spec:
https://dom.spec.whatwg.org/#dom-domtokenlist-toggle